js创建的元素怎么绑定事件
当在使用js或jQuery创建元素时,用 on(事件,function(){代码}) 或者 事件(function(){代码 })绑定事件时
例如:
1 <div> 2 <button id="btnCreate">点击</button> 3 </div> 4 <div class="createDiv"> 5 6 </div> 7 8 js代码: 9 $('#btnCreate').on('click',function () { 10 $('<button class="agin" style="color:red">再点点</button>').appendTo($('.createDiv'));//创建button 11 }) 12 $('.createDiv').on('click',function(){alert(3)})
但发现这样aler是弹不出来的,因为在点击创建时,.agin按钮在document里是不存在的。这种时候需要利用委托或者直接指明父元素才能绑定。
解决办法1:指明创建元素的父元素,再使用on方法绑定,所有的事件最后都是在on方法里执行的
1 $(".createDiv").on("click",".agin",function () { 2 alert(3); 3 });
解决办法2:利用委托,其实和利用on方法用法差不多
1 $(".createDiv").delegate('agin', 'clik', function () {
alert(3);
});
利用监听,监听事件的发生也是个方法,这里就不赘述了。