我的键盘调用click（），但click（）没有委派

Question

我有一个程序，当单击一个保存图标时，将根据其父ID将字符串数据存储在本地存储中。我添加了keyup（）事件以链接到该click（）事件，但是在这种情况下，单击没有委派给一个ID，该程序的行为就像单击了所有保存图标一样，将其弄乱了。

是否有一种方法可以在由keyup函数调用后获取保存图标来委派click函数？下面的代码：

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