事件不适用于动态元素的Jquery

Question

$(".spanCont:first .collection_shop").on("click",function(){
            var current_item = $(this);
            $.ajax({
                url: "ajax/abc.php",
                type: "POST",
                dataType: 'html',
                data: {collection_id: current_item.attr("value")},
                beforeSend: function(xhr) {
                    current_item.replaceWith("<div id='temp_div'></div>");
                }
            }).done(function(data){
                $(".spanCont:first .span-2, .spanCont:first input").remove();
                $("#temp_div").replaceWith(data);
            });
        });

这段代码应该适用于使用类.collection_shop的所有静态和动态单击元素，但它仅适用于静态元素。

Answer 1

为此，您应该使用https://api.jquery.com/on/

$(document).on("click",".spanCont:first .collection_shop",function(){
   //some operation
});

它帮助您为动态元素附加处理程序。

Answer 2

对于动态元素，需要使用on()的其他版本(删除)。将事件委托给动态元素的静态父级，或者可以使用文档/正文等。

$(document).on("click", ".spanCont:first .collection_shop", function(){
    var current_item = $(this);
    $.ajax({
        url: "ajax/abc.php",
        type: "POST",
        dataType: 'html',
        data: {collection_id: current_item.attr("value")},
        beforeSend: function(xhr) {
            current_item.replaceWith("<div id='temp_div'></div>");
        }
    }).done(function(data){
        $(".spanCont:first .span-2, .spanCont:first input").remove();
        $("#temp_div").replaceWith(data);
    });
});

你有

$(".spanCont:first .collection_shop").on("click",function(){

你需要，为事件授权

$("static-parent-selector").on("click", .spanCont:first .collection_shop, function(){

委托事件的优点是它们可以处理以后添加到文档中的子类元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序( jQuery文档 )。

Answer 3

使用事件委托

$(document).on("click",".spanCont:first .collection_shop",function(){
//code
});