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

对于动态元素，您需要on（）的其他（delgation）版本。将事件委托给动态元素的静态父级，或者可以使用document / body等。

$(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 Docs

Answer 2

使用event delegation

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

Answer 3

使用.on()

使用Event Delegation

语法

$( elements ).on( events, selector, data, handler );

像这样

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

或

$('parentElementPresesntAtDOMready').on('click','.spanCont:first .collection_shop',function(){
   // code here
});

Answer 4

你应该使用event delegation

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

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

Answer 5

另一种方法，对你的ui有点好处，而不是从根文件＆＃39;

设置事件授权

将AJAX从侦听器拆分为它自己的功能，并创建一个“侦听”的侦听器功能。在通过ajax调用中的代码更新DOM之后。

无论如何要分开（比如将来你想从其他东西触发ajax请求）

function ajaxCall() {

  /* ... do the ajax call and return data   */
 .....done(function() { 

  /* update the DOM et al */

  /* reset the listener */
  listen();

 });
}

function listen() {
 $(".spanCont:first .collection_shop").off("click").on("click",function(){
   ajaxCall();
 });
}
/* start */
listen();

喜欢 - http://jsbin.com/foruyapi/1/edit

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

5 个答案: