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

Question

我有一个程序可以在单击保存图标时根据其父项的 ID 在本地存储中存储字符串数据。我将 keyup() 事件添加到 link 到那个 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();
    }
});

Answer 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();
}

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

My keyup calls a click() but the click() doesn't delegate

javascript

click

delegation

keyup