首页 > Web开发 > 详细

jquery html动态添加的元素绑定事件详解

时间:2017-01-01 19:55:29      阅读:287      评论:0      收藏:0      [点我收藏+]

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:

<div id="testdiv">
  <ul></ul>
</div>

  

<div id="testdiv">
  <ul>
 
   <li name="apple">apple</li>
   <li name="pear">pear</li>
 
  </ul>
</div>
<script>
 
function test(name){
  alert("I‘m "+name);
 
}
 
//做法如下:
 
$("#testdiv ul").on("click","li", function() {
  //test($(this).attr("name"));
  //do something here
});
 
//主动触发某个<li>的click事件
 
// $("#testdiv ul li[name=‘apple‘]").trigger("click");
 
</script>

  

但对于ajax添加进来的html代码段,如$("#xx").html(html内容),如果想里面的元素也会触发我们定义的事件,必须委托

需要用到事件委托,比如:

普通绑定事件:$(‘.btn1‘).click(function(){}绑定

on绑定事件:$(document).on(‘click‘,‘.btn2‘,function(){})绑定  .btn是ajax加载的html内容样式选择器

jquery html动态添加的元素绑定事件详解

原文:http://www.cnblogs.com/evemen/p/6241351.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!