Question

我正在拖动一个li元素，并将其删除到ul。我想为这个li元素注册click handler。

但是，点击事件未被触发。

            function initListClickEvent() {
                $("#list1 > li").click(function () {
                    $(this).css("background-color", "blue");
                    $(this).css("color", "white");
                });
            }

            $(document).ready(initListClickEvent);

            $(function () {
                $("#list1").droppable({
                    accept: 'li',
                    drop: function (e, ui) {
                        initListClickEvent();
                    }
                });
            })

问题的解决方案是什么？所有元素都会在点击时做出反应（因为他们的点击事件已经预先注册过），除了我刚刚拖到列表中的那个。

Answer 1

改变它

 function initListClickEvent() {
     $("#list1 > li").click(function () {
        $(this).css("background-color", "blue");
        $(this).css("color", "white");
    });
        $("#list1 > li").trigger("click");
    }

    $(document).ready(initListClickEvent);

    $(function () {
        $("#list1").droppable({
            accept: 'li',
            drop: function (e, ui) {
                initListClickEvent();
            }
        });
    });

修改

如果元素是动态添加的，你应该使用event delegation

$(document).on("click","#list1 > li",function(){ $(this).css("background-color", "blue"); $(this).css("color", "white"); });

它可以帮助您为未来元素附加处理程序

Answer 2

你应该使用jquery的委托来动态添加项目

 $(function () {
            $("#list1").droppable({
                accept: 'li'
            });

$( "#list1" ).delegate( "li", "click", function() {
$(this).css("background-color", "blue");
$(this).css("color", "white");    });

});

在回调中添加时，单击事件不受约束

2 个答案: