javascript - 我的 keyup 调用 click() 但 click() 不委托
问题描述
我有一个程序,可以在单击保存图标时根据其父项的 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();
}
});
解决方案
在这种情况下,您有 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();
}
推荐阅读
- python-3.x - 将 UNIX 时间戳转换为日期?
- r - 如何交换 facet_wrap 的两个图
- visual-studio-code - VSCode - 从 cli 打开远程
- excel - 如果单元格包含 VBA 中的数字,如何复制相应的行标题和列标题?
- android - 在 Android 中出现“Aapt2InternalException: AAPT2 aapt2-3.4.2-5326820-windows Daemon #0: Daemon startup failed”错误
- c++ - 使用标头时,是否需要插入 cpp 文件中使用的每个函数?
- javac - Java 11:编译器无法识别 module-info.java 中指定的注释处理器
- python - OpenPyxl load_workbook 保存
- chef-infra - 将属性从 Terraform 传递给 Chef
- excel - 使用 VBA 将多个工作簿中的数据组合到主文件中时,如何省略特定文件?