奇怪的jQuery的行为“click”事件

问题描述：

<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>

我想通过点击锚执行一些代码tag.so我用

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

但事与愿违锻炼。所以我用

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

也是我用

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

，但他们也不能工作。什么对我来说是

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

为什么这样......当他们都应该表现出相同的行为。

你确定jquery被加载？它应该工作在这里作品：http://jsfiddle.net/kMSHv/ – undefined 2012-07-08 21:32:54

我有其他jquery代码正在运行.. jquery是百分之百加载..即使这个查询工作，但只有通过使用生活 – Bhoot 2012-07-08 21:34:28

不，他们不是应该有相同的行为。重新阅读我的答案，'.click'和'.bind'不会委托 - 只有在执行绑定时，它们才绑定到页面中的当前元素。另一方面，'.live'将在任何给定时间匹配文档中的任何'a'标签（包括动态添加的标签）。 – 2012-07-08 21:56:47

答

.click和.bind没有事件代表团。在元素加载到DOM之前，您正在执行它们。无论是移动你.click到锚低于或者将其添加一个DOM就绪事件中：

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

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

以上两者具有相同的结果，无论使用哪一个你找到更多可读/维护。

.live作品，现在因为它使用事件委托，这是每一个外行人看来，类似

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

注意.live在jQuery的弃用1.7+所以你应该更喜欢事件代表团.on方法。另请注意，.on仅在绑定到传递子参数selector的父元素时才具有事件委托效果。

这是Fiddle与$(document).ready()。

编辑：按OP的评论，因为你动态添加锚标记，你有两个选择：事件代表团（推荐）或重新绑定，每次添加新内容时的事件。

在jQuery中1.7+，你应该使用.on()事件委派：

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

这里是一个全功能的现场演示，.on事件代表团和Ajax：
JSFiddle

在jQuery中< = 1.6。 4，您将不得不使用.delegate()或.live()。哪一个为每个版本提供了更好的可用性和性能，请参阅.live() jQuery API page。

对于jQuery> = 1.4.3 < 1。7：

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

好吧，我也这样做了，那真的是让我困惑的原因.. – Bhoot 2012-07-08 21:36:21

发生了什么事情：你正在试图将一个回调绑定到元素创建之前的元素事件。该解决方案通过仅在创建页面中的所有元素之后绑定回调来解决该问题。 – YuriAlbuquerque 2012-07-08 21:38:29

@Boot现在就试试吧。 '：）'如果这不起作用，请给我们一些标记。这实际上是您诊断的唯一可能的问题（适用于事件委托，但不适用于事件绑定）。 – 2012-07-08 21:39:05

答

该代码可以使用您的HTML精绝：

$(document).ready(function(){ 
    $('a').on('click', function(e){ 
     console.log('some action.'); 
    }); 
});

附：此代码将在所有链接上运行！

奇怪的jQuery的行为“click”事件

相关推荐