我在 ajax 交互方面遇到问题
var json = [
{ firstName: "John", lastName: "Doe" },
{ firstName: "Anna", lastName: "Smith" },
{ firstName :"Peter", lastName: "Jones" }
];
$(".container").append("<ul>");
// cycle through array and select each object in it
$.each(json, function(idx, object) {
$(".container").append("<li>" + object.firstName + " " + object.lastName + '<input type="submit" value="del"><input type="hidden" value="' + idx + '"></li>');
});
$(".container").append("</ul>");
$("li").on("click", "input", function() {
var idx = $(this).next().val();
json.splice(idx, 1);
// clear container
$(".container").text("");
$(".container").append("<ul>");
// cycle through array and select each object in it
$.each(json, function(idx, object) {
$(".container").append("<li>" + object.firstName + " " + object.lastName + '<input type="submit" value="del"><input type="hidden" value="' + idx + '"></li>');
});
$(".container").append("</ul>");
这是一个fiddle
如果我单击“删除”,一切都会按预期进行。但如果我想删除第二项,则没有任何响应。
谁能给我解释一下为什么会这样?提前致谢!
最佳答案
当您清除容器时,附加了单击事件处理程序的 li
元素将从屏幕上删除。
您使用 .on()
几乎正确地获得了事件委托(delegate)但您将事件添加到更新后将不再出现在屏幕上的元素(li
)。
尝试将事件附加到容器,更改为:
$(".container").on("click", "li input", function() {
Working Fiddle
关于javascript/jquery 数组交互在 .on ("click"之后不起作用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16499599/