添加和删​​除 jquery li 元素

Question

我想添加 li 元素，它工作正常，但删除对新元素不起作用。 我一开始有三个 li 元素，因为 remove 函数有效。

我用 "add" 函数创建了相同 class 的 Li 元素，为什么它对新元素不起作用？

http://jsfiddle.net/3c96gduL

$(document).ready(function(){
    $("#add_li").click(function (){
        $("ol").append("<li>" + $("input").val() + "<a href=\"#\" class=\"remove\">X</a></li>");
    });
    $("#remove_li").click(function(){
        $("li:last").remove();
    });
    $(".remove").click(function(){
        $(this).parents('li').remove();
    });

    var log = $('.remove');
    console.log(log);
    console.log(jQuery);    

});

Answer 1

您需要使用 event delegation 将事件附加到动态添加的 dom。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$("ol").on('click','.remove',function(){
    $(this).parents('li').remove();
});

Working Demo