Heim >Backend-Entwicklung >PHP-Tutorial >javascript - jquery能为多个class相同的div绑定同一个事件吗 ?
刚刚可能没说清楚,我重新描述一下:
开始是<a class="a">a1</a>
$('.a').bind('click',function(){
//调用jquery克隆一份a标签,做一些其他修改
});
然后变成这样
<code><a class="a">a1</a>` <a class="a">a2</a> </code>
问题:为什么点击a1可以调用上面那段jquery,而a2就不可以了? 1-3楼的方法我都试过了,还是没用.
刚刚可能没说清楚,我重新描述一下:
开始是<a class="a">a1</a>
$('.a').bind('click',function(){
//调用jquery克隆一份a标签,做一些其他修改
});
然后变成这样
<code><a class="a">a1</a>` <a class="a">a2</a> </code>
问题:为什么点击a1可以调用上面那段jquery,而a2就不可以了? 1-3楼的方法我都试过了,还是没用.
<code class="js">$('.a').on('click',function(e){ alert(1) })</code>
楼主可以试下这个,官方推荐用on
那个是因为动态添加元素吧,建议楼主去看下对于动态添加元素如何绑定事件的。
大概代码是这个样子的
<code class="js">$('div').on('click','.a',function(){})</code>
为什么不能用?
因为你绑定的元素在页面文档结构生成后就已经绑定了,但是通过动态生成的dom结构是没法用先前的click方法的,因此你需要重新绑定或者是动态绑定,
<code>$('div').delegate('a', 'click' ,function(){ //To do })</code>
当然了,如果还是不行,那么你可以考虑吧上面这个事件封装成一个方法,然后再//To do里面递归调用~
哦,绑定的时候实例还不存在自然绑定不上了。以前有个live方法可以解决你这个问题,现在好像改成别的方式(名字)了,查一下手册呗。
都可以啊啊啊
如果是动态添加的话,我感觉这样就可以了$(document).on('click','.a',function(){...});
那是你克隆的问题吧,楼主可以看下clone()方法,传入参数true,会把元素上绑定的方法一起克隆的。或者就用上面提到的代理的方法
如果模块化批量方法,extend更好;
<code>$(function(){ $.fn.extend{ simple:function(){ var root=$(this); root.click(function(){ alert($(this)); }) } } $('.a').simple(); })</code>
<code>$('body').click(function(e){ var tar = e.target; if($(tar).hasClass('a')){ xxxxx } });</code>
这样就OK了!
1楼没答到点上,确实是动态追加dom的问题,所以需要通过委托父节点监听来解决,最简单的是委托文档节点,毕竟所有的dom都是追加在文档节点的后代中:$(document).on('click','.a',function(){...})
动态添加的dom 监听其父元素,例如
<code><div class="parent"> <div class="a"></div> </div> <script> $(".parent").on("click",".a",function(){ //调用jquery克隆一份a标签,做一些其他修改 }); </script></code>