Heim >Backend-Entwicklung >PHP-Tutorial >javascript - jquery能为多个class相同的div绑定同一个事件吗 ?

javascript - jquery能为多个class相同的div绑定同一个事件吗 ?

WBOY
WBOYOriginal
2016-06-06 20:13:231133Durchsuche

刚刚可能没说清楚,我重新描述一下:

开始是<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>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:如何制作手机网页?Nächster Artikel:ThinkCMF page 分页传递参数