jQuery“单击"事件的奇怪行为 [英] strange behaviour of jquery 'click' event

问题描述

我有一个锚标签

<li><a href="#" class="institution">Click me</a></li>
<li><a href="#" class="department">Click me</a></li>
<li><a href="#" class="branch">Click me</a></li>

我想通过单击锚标记来执行一些代码.所以我使用了

$('a').click(function(){
    //do something..
});

，但是没有成功.所以我用

$('a').on('click',function(){
    //do something..
});

我也用过

$('a').bind('click',function(){
    //do something..
});

，但是它们也不起作用.对我有用的是

$('a').live('click',function(){
    //do something..
});

为什么会这样..当所有人都应该表现出相同的行为时.

解决方案

.click和.bind没有事件委托.您正在将元素加载到DOM中之前执行它们.将您的.click移动到锚点下方，或将其添加到DOM ready事件中:

$(document).ready(function() {
    $('a').click(function(){
        //do something..
    });
});

OR

$(function() {
    $('a').click(function(){
        //do something..
    });
});

以上两种方法都具有相同的结果，请使用您认为更具可读性/可维护性的任何一种.

.live 现在可以正常工作，因为它使用了事件委托，即从外行的角度来看，类似于

$(document).on('click', 'a', function(){
    //do something..
});

请注意，jQuery 1.7+中已弃用.live，因此您应该使用 .on 事件委托的方法.还要注意，.on仅在绑定到传递后代selector参数的父元素时才具有事件委托作用.

这是 小提琴 和 JSFiddle

在jQuery< = 1.6.4中，您将必须使用.delegate()或.live(). .live() jQuery API页面中显示了哪个版本可以为每个版本提供更好的可用性和性能. /p>

对于jQuery> = 1.4.3< 1.7:

$('#AnchorsDivID').delegate('a', 'click', function(){
    //do something..
});

I had an anchor tag

<li><a href="#" class="institution">Click me</a></li>
<li><a href="#" class="department">Click me</a></li>
<li><a href="#" class="branch">Click me</a></li>

i wanted to execute some code by clicking on the anchor tag.so i used

$('a').click(function(){
    //do something..
});

but it did not work out. So I used

$('a').on('click',function(){
    //do something..
});

also i used

$('a').bind('click',function(){
    //do something..
});

but they did not work either. what worked for me was

$('a').live('click',function(){
    //do something..
});

why is this so..when all of them are supposed to show same behaviour.

解决方案

.click and .bind don't have event delegation. You're executing them before the elements are loaded into the DOM. Either move your .click to below the anchors or add it inside a DOM ready event:

$(document).ready(function() {
    $('a').click(function(){
        //do something..
    });
});

OR

$(function() {
    $('a').click(function(){
        //do something..
    });
});

Both of the above have the same result, use whichever you find more readable/maintainable.

.live works right now as it uses event delegation, which is, per a layman's view, similar to

$(document).on('click', 'a', function(){
    //do something..
});

Note that .live is deprecated in jQuery 1.7+ so you should prefer the .on method for event delegation. Also note that .on only has the event delegation effect when bound to a parent element passing a descendants selector parameter.

Here's a Fiddle with $(document).ready().

edit: As per OP's comment, since you're adding anchor tags dynamically, you have 2 options: event delegation (recommended) or re-binding the events every time you add new content.

In jQuery 1.7+, you should use .on() for event delegation:

$('#AnchorsDivID').on('click', 'a', function(){
    //do something..
});

Here's a full featured live demo with .on event delegation and Ajax:
JSFiddle

In jQuery <=1.6.4, you will have to use .delegate() or .live(). Which one provides better usability and performance for each version is shown at the .live() jQuery API page.

For jQuery >=1.4.3 <1.7:

$('#AnchorsDivID').delegate('a', 'click', function(){
    //do something..
});

这篇关于jQuery“单击"事件的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！