Question

我使用jquery.ui创建了一些可排序的li，并且还有一个添加按钮，最后添加新的li，每个li中都有一个删除文本，其中删除了父li，但是这个删除功能是不适用于新创建的li或者更确切地说我应该说删除文本的点击操作不适用于新添加的li以获得更多解释。 for working demo

$(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();


        $(".btn").click(function (e) {

            e.preventDefault();
            var fieldsCount = $(".remove").length;
            if(fieldsCount){
                number = $('ul#sortable li:last').attr("id");
                number++;
                $("#sortable").append('<li id ="'+number+'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item '+number+' <a class="remove hello'+number+'">remove</a></li>');
                        $("#sortable").sortable('refresh');
                }else{
                    $("#sortable").append('<li id="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <a class="remove hello1">remove</a></li>');
                    $("#sortable").sortable('refresh');
                }

        });
        $("a.remove").click(function(){
            $(this).parent().remove();
        });
    });

Answer 1

而不是.click()，请在其委派的事件模式中尝试.on()：

    $("#sortable").on("click", "a.remove", function(){
        $(this).parent().remove();
    });

使用.click()时，它只会将处理程序绑定到当时存在的元素，因此不会自动处理稍后添加的元素。使用.on() method允许您将处理程序绑定到已存在的父级，但在第二个参数中，您可以提供一个选择器来匹配您真正关心的元素 - 这些元素不在你致电.on()时需要存在。有关更详细的说明，请阅读the doco。

演示：http://jsfiddle.net/8fXWw/1/

Answer 2

Click事件不适用于动态添加的元素。您应该使用jQuery.on将click事件绑定到动态添加的LI。像这样：

$("#sortable").on("click", "a.remove", function(){
    $(this).parent().remove();
});

将新li添加到li组后，删除效果无效

2 个答案: