数据渲染时js不被触发 解决方案

作者：太狼
链接：https://www.zhihu.com/question/23895785/answer/26573034
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

事件委托 ，ajax载入新dom之前js就加载完了，事件当然没有绑定到新载入的dom上。举个例子，如果ajax载入了一个<span class="load"></span>
这个时候如果你的js中写了$('.load').on('click',function(){ do something...});事件是绑定不上去滴。你需要$('body').on('click' , '.load' , function(){ do something ...});原理很简单，将事件委托到body（当然可以是其它父元素），等事件冒泡到父元素上面再进行事件处理。当然，如果你在body上绑定几百个事件，基本上页面就跪了。。。so，还有一个方法，就是预判你要加载的dom，然后预先创建一个同样的元素。例如：你可以先在页面中写一个<span class="load load-hide">element</span>
然后将事件绑定到这个DOM上，ajax加载的时候只需要加载element然后$('.load').on('click' , function(){ do something ... });
.......
some code
.......
var $_load = $('.load'),
    $load  = $_load.clone(true),//true参数会将事件绑定克隆
    $ele   = $load.html(element);
$_load.after($ele);
当然，这种方法在一次性载入大量数据的情况下性能也非常堪忧。但是在零碎的不同类项的数据载入时比较方便。