javascript - ajax加载进去的内容绑定事件不生效

Question

场景：
通过ajax把列表加载到页面，这个加载进去的元素需要绑定事件。
如果直接写绑定代码，会失效。因为绑定的时候元素还没加载进去。
如是，请教各位前辈。或者有没有办法控制JS的执行顺序。

Answer 1

1、在ajax成功后的success回调函数里面，对新增的DOM元素绑定事件；
2、使用delegate，在初始化页面时，将事件绑定到已经存在的页面元素中，具体可以百度一下delegate用法；

Answer 2

用jQuery.on('click','elt',function())。可参考事件委托机制。

Answer 3

$("document").on('click', "eventName", function(){});

Answer 4

通过ajax加载进来的JS默认是不会执行的，同样通过ajax加载进来的DOM元素默认也是没有事件的;

如果要给通过ajax加载进来的DOM元素绑定事件，可以向@Ewellyuan说的那样把绑定事件写在成功回调里面，或者进行事件代理或你可以先把需要绑定的事件统一定义到一个函数当中，当DOM加载成功后，再回调中调用一下定义的那个函数；

Answer 5

两个方案：
1、在ajax的success回调函数里捆绑事件，这样可以确保捆绑事件的DOM已经加载。
2、需要捆绑的操作定义为function，在DOM上直接写事件句柄来调用function

额。。。试了大家提到的delegate，也可以实现。有兴趣可以参考这篇文章，讲的很到位
http://kb.cnblogs.com/page/94469/

Answer 6

把你需要绑定事件的那个元素 写在success里面

Answer 7

1，绑定事件放在加载元素后面

    jQuery.ajax({
        success:function(){
            showData();
            addEvent();
        }
    })

2,事件委任
jQuery 1.4

jQuery("domSelect").live("eventName",function(){});

3,加载元素的时候直接在元素中加入onclick属性

jQuery.ajax({
    success:function(){
        jQuery("body").append("<p onclick='show()'>"+1+"</p>")
    }
})

Answer 8

$(document).delegate('.class','click',function(event) {
//do something
})

Answer 9

肯定用事件委托来做的。关于事件委托并不一定非要使用jQuery的delegate方法，只要符合事件委托的思想都可以生效，比如使用on来绑定事件，使用$(ev.target)来区分将要触发事件的元素。

当然原生的javascript也可以通过事件委托来解决这样的问题。

不建议在创建元素的时候绑定事件。
你想一想，一个稍微大一点的网站，需要绑定的事件很多，到处都存在添加元素的可能，如果你每次都在添加元素的时候绑定事件，1是影响函数执行的效率，2是增加了大量代码。