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

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

WBOY
Release: 2016-06-06 20:13:23
Original
1135 people have browsed it

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

开始是<a class="a">a1</a>

$('.a').bind('click',function(){
//调用jquery克隆一份a标签,做一些其他修改
});

然后变成这样

<code><a class="a">a1</a>`
<a class="a">a2</a>

</code>
Copy after login
Copy after login

问题:为什么点击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>
Copy after login
Copy after login

问题:为什么点击a1可以调用上面那段jquery,而a2就不可以了? 1-3楼的方法我都试过了,还是没用.

<code class="js">$('.a').on('click',function(e){ alert(1) })</code>
Copy after login

楼主可以试下这个,官方推荐用on

那个是因为动态添加元素吧,建议楼主去看下对于动态添加元素如何绑定事件的。
大概代码是这个样子的

<code class="js">$('div').on('click','.a',function(){})</code>
Copy after login

为什么不能用?
因为你绑定的元素在页面文档结构生成后就已经绑定了,但是通过动态生成的dom结构是没法用先前的click方法的,因此你需要重新绑定或者是动态绑定,

<code>$('div').delegate('a', 'click' ,function(){
    //To do
})</code>
Copy after login

当然了,如果还是不行,那么你可以考虑吧上面这个事件封装成一个方法,然后再//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>
Copy after login

<code>$('body').click(function(e){
  var tar = e.target;
  if($(tar).hasClass('a')){
   xxxxx
 }
});</code>
Copy after login

这样就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>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template