我的 keyup 调用 click() 但 click() 不委托答案

【问题标题】：My keyup calls a click() but the click() doesn't delegate我的 keyup 调用 click() 但 click() 不委托
【发布时间】：2020-04-19 18:06:11
【问题描述】：

我有一个程序可以在单击保存图标时根据其父项的 ID 在本地存储中存储字符串数据。我添加了 keyup() 事件以链接到该 click() 事件，但在这种情况下，点击没有委托给 ID，并且程序的行为就像所有保存图标都被点击一样，这把它搞砸了。

有没有办法让保存图标在被keyup函数调用后委托点击函数？代码如下：

// When save icon is clicked, gets hourText from storage, checks it exists, parses to an array. Changes relevant text based on user input, saves array, calls display function

$(".save-icon").click(function (event) {

    event.stopPropagation();
    dailyHourText = "hourText" + currentDayEl.innerHTML;
    var toDoList = localStorage.getItem(dailyHourText); // this is the string from the local storage
    //convert string toDoList into array daysActivities
    if (toDoList === null) {
        daysActivities = ["", "", "", "", "", "", "", ""];
    }
    else {
        daysActivities = JSON.parse(toDoList);
    }

    var blockClicked = $(this).parent().attr("id");
    var pos = blockClicked - 9; // converts id to array position

    daysActivities[pos] = $("#" + blockClicked).find(".inputbox").val(); 

    toDoList = JSON.stringify(daysActivities); // stringify array
    localStorage.setItem(dailyHourText, toDoList); // store array
    $("#" + blockClicked).find(".inputbox").addClass("hide"); // hides input box
    $("#" + blockClicked).find(".textarea").removeClass("hide"); // shows text
    displayActivities();
});

$(".inputbox").on('keyup', function (event) {
    event.stopPropagation();
    if (event.keyCode === 13) {
        $(".save-icon").click();
    }
});

【问题讨论】：

这可能是javascript中冒泡捕获的场景。请发布html代码以帮助您。

标签： javascript click delegation keyup

【解决方案1】：

在这种情况下，您有 2 个事件最终执行相同的操作。将您的逻辑内容提取到它自己的函数中，然后从“click”和“keyup”处理程序中简单地调用它。您唯一应该传递给该函数的是父元素（来自单击处理程序中的 $(this).parent() ）。

$(".save-icon").click(function (event) {

    event.stopPropagation();
    updateLocalStorage($(this).parent());
});

$(".inputbox").on('keyup', function (event) {
    event.stopPropagation();
    if (event.keyCode === 13) {
        // get the correct "save-icon" for this inputbox, and get it's parent
        // modify this as appropriate for your DOM structure
        var parent = $(this).closest(".save-icon").parent();
        updateLocalStorage(parent);
    }
});

function updateLocalStorage(parent) {
    dailyHourText = "hourText" + currentDayEl.innerHTML;
    var toDoList = localStorage.getItem(dailyHourText); // this is the string from the local storage
    //convert string toDoList into array daysActivities
    if (toDoList === null) {
        daysActivities = ["", "", "", "", "", "", "", ""];
    }
    else {
        daysActivities = JSON.parse(toDoList);
    }

    var blockClicked = $(parent).attr("id");
    var pos = blockClicked - 9; // converts id to array position

    daysActivities[pos] = $("#" + blockClicked).find(".inputbox").val(); 

    toDoList = JSON.stringify(daysActivities); // stringify array
    localStorage.setItem(dailyHourText, toDoList); // store array
    $("#" + blockClicked).find(".inputbox").addClass("hide"); // hides input box
    $("#" + blockClicked).find(".textarea").removeClass("hide"); // shows text
    displayActivities();
}

【讨论】：