Jquery on event 不适用于动态元素答案

【问题标题】：Jquery on event not working for Dynamic elementsJquery on event 不适用于动态元素
【发布时间】：2014-03-13 11:56:00
【问题描述】：

$(".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 的元素的静态和动态点击，但它仅适用于静态元素。

【问题讨论】：

标签： jquery dynamic onclick tags jquery-click-event

【解决方案1】：

使用event delegation

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

【讨论】：

【解决方案2】：

使用.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
});

【讨论】：

【解决方案3】：

对于动态元素，您需要其他（委托）版本的 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 Docs

【讨论】：

【解决方案4】：

您应该为此使用event delegation

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

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

【讨论】：

【解决方案5】：

另一种方法，比从根“文档”设置事件委托对你的用户界面更友好

将 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

【讨论】：

* 如果这些 .collection_shop 元素是动态添加的 - 也值得为 :first 元素赋予它自己的独特类 - 以减少选择器语法。