javascript/jquery 数组交互在 .on ("click"之后不起作用)

Question

我在 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

如果我单击“删除”，一切都会按预期进行。但如果我想删除第二项，则没有任何响应。

谁能给我解释一下为什么会这样？提前致谢!

Answer 1

当您清除容器时，附加了单击事件处理程序的 li 元素将从屏幕上删除。

您使用 .on() 几乎正确地获得了事件委托(delegate)但您将事件添加到更新后将不再出现在屏幕上的元素(li)。

尝试将事件附加到容器，更改为:

 $(".container").on("click", "li input", function() {

Working Fiddle