jQuery操作动态生成元素无效的解决方法_html/css/js教程

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

Ajax异步返回的元素

1	<div class="action">

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

</div>

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

1	$('.ajax-access').click(function(){

2	alert('click');

});

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

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

1	$(".ajax-access").live("click", function() {

2	alert('click');

});

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

1	$(".ajax-access").on("click", function() {

2	alert('click');

});

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

1	/* $('.content-wrap') 获取的是所操作元素的静态父级元素 */

2	$('.content-wrap').on('click', '.ajax-access', function(){

3	alert('click');

});

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

(责任编辑：最模板)

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