最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > html/css/js教程 >

jQuery操作动态生成元素无效的解决方法

时间:2014-12-09 20:39来源:未知 作者:最模板zuimoban 点击:
jQuery给动态生成的元素绑定相关的事件,会存在没有效果的情况。网上很多资料都说使用live函数能够解决这个问题,但是live函数,在1.9版本之后就不弃用了。现在比较好的是使用on函数

jQuery给动态生成的元素绑定相关的事件,会存在没有效果的情况。网上很多资料都说使用live函数能够解决这个问题,但是live函数,在1.9版本之后就不弃用了。现在比较好的是使用on函数,但是要绑定在操作元素的静态父元素

Ajax异步返回的元素

1 <div class="action">
2     <button type="button" class="btn default btn-xs ajax-access" >查看权限</button>
3 </div>

使用jQuery操作按钮,但是没有任何反应

1 $('.ajax-access').click(function(){
2     alert('click');
3 });

click是bind(‘click’,…)的简化形式,是jQuery扫描所有元素,查找到所有class=”ajax-access”的元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,Ajax动态生成的元素不包括在内。

在jQuery 1.9 之前的版本中,有一个live函数可以绑定动态生成的元素,但是 1.9之后的版本都移除了这个函数

1 $(".ajax-access").live("click", function() {
2     alert('click');
3 });

比较新版本的,可以使用on这个函数,如下

1 $(".ajax-access").on("click", function() {
2     alert('click');
3 });

但是这个对于Ajax动态生成的元素还是没有什么效果,发现需要绑定到操作元素的父级元素,父级元素必须是静态的,而非动态生成的

1 /* $('.content-wrap') 获取的是所操作元素的静态父级元素  */
2 $('.content-wrap').on('click', '.ajax-access', function(){
3     alert('click');
4 });

总结:使用jQuery操作动态生成的元素,最好的方式还是使用on,但是要绑定到静态父元素。

 

(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容