解决 jQuery 动态新增节点无法触发 onclick 点击事件的问题

     问题: 当我们在网页加载完成后, 使用 JQuery 给页面动态增加增加节点时, 会发现新增节点无法触发点击事件

     处理: 使用 live() 或 on() 方法给新增节点添加点击事件

   !!!注意: live() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。

     所以 JQuery 1.9 后的版本请使用  on() 方法给元素添加点击事件   

      举个例子, Html示例:     

<body>
	<div id="demo">
		<span class="demo1">demo-1</span>
		<span class="demo1">demo-2</span>
		<span class="demo1">demo-3</span>
	</div>
</body>
<script type="text/javascript">
	$("#demo").click(function(){
        //动态在 div 的末尾追加一个新元素
		$("#demo").append('<span class="demo1">demo-4</span>');        
	});
</script>

     使用 live() 方法:  

            live() 方法为被选元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

     通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

     提示:如需移除事件处理程序,请使用 die() 方法。     

     用法:$("#parent").live('click', 'child', function(){})

$('.demo1').live('click', function(){
    alert('给当前及未来的元素添加点击事件');
});

   使用 on() 方法:推荐使用该方法

         on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

         自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,推荐使     用该方法,它简化了 jQuery 代码库。

        注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

        提示:如需移除事件处理程序,请使用 off() 方法。

        提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

        用法:$("#parent").on('click', 'child', function(){})

$("#demo").on('click','.demol',function(){
    alert('OK')
});

  测试, 点击事件可以被触发

 

展开阅读全文

没有更多推荐了,返回首页