在回调中添加时，请单击事件不会绑定

Question

我正在拖动一个li元素，然后将其放到UL。我想为此Li元素注册单击处理程序。

但是，点击事件没有被触发。

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

编辑

如果元素动态添加，您应该使用事件委托为此

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