之前的JS在AJAX之后不被调用了，肿么办？

Question

这段是判断视频中是否有音频的代码，如果有音频，插入一个onoff开关

    $('video').on('loadeddata', function(e) {
        if (this.webkitAudioDecodedByteCount > 0 || this.mozHasAudio || this.audioTracks && this.audioTracks.length)
            $(this).after("<i class='onoff'></i>").css('cursor', 'pointer');
    });

第一页没有问题，用了无限翻页的JQUERY插件，第二页就不加载这段js，查了一些资料，说可以用on绑定DOM

$('body').on('click','.onoff',function(e){

但是这段代码是判断有音频以后才插入开关的，怎么写？

$('body').on('loadeddata','video', function(e) {

这样写第一页都不好用了。
所以我想问，怎么解决这个问题，各位大神帮帮忙！

Answer 1

.on(事件名称, 目标对象, callback) 这种形式称为事件代理，事件代理生效有两个条件，一个是目标对象存在，二个是事件在冒泡到代理对象(即挂载事件处理函数的对象)之前没有被中止(stopPropagation)掉。

对象存在这个事情好办，因为只要在代理对象内添加了目标，它就会存在，如果没有添加，那就不触发事件，与期望逻辑并无冲突。倒是第二个条件容易出问题，因为很有可能某个事情就在冒泡的过程中被干掉了，所以如果第一个条件存在仍然不能触发事件的情况下，需要排查 stopPropagation 的问题。

另外，一般来说，绑定在 body 上的事件处理都可以直接绑定在 $(document) 上(说实在的，我还没给 body 绑过，所以这里有没有坑还真不知道，现在假设没有坑吧)——所以 .on('click','.onoff', callback) 本身应该是没有问题的，但这里要注意在处理函数中，需要判断是点击的哪个 .onoff，对应应该处理哪个音频对象(如果有可能存在多个的话……至少从题目中发现存在这种可能)。

loadeddata 这个事件呢，一般只处理一次。理论上来说应该也只会触发一次，所以似乎绑定到 body 或者 document 没有问题……但是注意：并不是所有事件都会冒泡，所以稳当起见，这个事件直接绑给对象会比较好。由于内容是动态加载，所以这里需要在每次加载内容之后去加载的内容中搜索音频对象来绑定事件。到于怎么搜索，其实也好办，比如给加载并绑定过事件的 video 都加个 class 或者其它什么属性，然后用 jQuery 选择器过滤掉这些就好；又比如，知道加载前的 DOM 位置，从这个位置往后搜索 video……