解决ajax加载的内容中js不执行问题。

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);

当然,这种方法在一次性载入大量数据的情况下性能也非常堪忧。但是在零碎的不同类项的数据载入时比较方便。

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » 解决ajax加载的内容中js不执行问题。


扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址