jquery'Click'事件的奇怪行为

Question

我有一个锚标记

<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..
});

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

Answer 1

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

$(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绑定到传递descendants selector参数的父元素时,仅具有事件委派效果.

这里有一个拨弄用$(document).ready().

编辑:根据OP的评论,由于您要动态添加锚标签,因此您有2个选项:事件委派(推荐)或每次添加新内容时重新绑定事件.

在jQuery 1.7+中,您应该.on()用于事件委派:

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

这是一个带有.on事件委托和Ajax 的全功能现场演示:
JSFiddle

在jQuery <= 1.6.4中,您将不得不使用.delegate()或.live()..live()jQuery API页面显示了哪个为每个版本提供了更好的可用性和性能.

对于jQuery> = 1.4.3 <1.7:

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