0

我已经使用 jquery.ui 创建了一些可排序的 li，并且最后还有一个添加按钮来附加新的 li，每个 li 内都有一个删除文本，在其单击父 li 时，此删除功能无法正常工作对于新创建的 li，或者更确切地说，我应该说删除文本上的单击操作不适用于新添加的 li，以获得我添加的更多解释。 用于工作演示

$(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();
        });
    });
4

2 回答 2

2

代替.click()，尝试.on()在其委托事件模式下：

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

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

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

于 2013-03-13T10:16:32.193 回答
0

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

$("#sortable").on("click", "a.remove", function(){
    $(this).parent().remove();
});
于 2013-03-13T10:21:49.973 回答