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

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>");

这是一个小提琴

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

谁能向我解释为什么会这样？提前致谢！

Answer 1

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

您几乎可以正确使用事件委托，.on()但是您将事件添加到更新后将不再出现在屏幕上的元素（lis）。

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

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

工作小提琴

Answer 2

您需要将其委托给最近的静态父级..在您的情况下..li不是静态的，它是动态添加 的..将其委托给.container在文档中附加元素时文档中存在的..

替换这个

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

和

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

在这里工作小提琴