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

OR

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

以上两者都有相同的结果，请使用您认为更易读/可维护的结果。

.live现在正在使用事件委派，根据外行人的观点，类似于

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

请注意，jQuery 1.7+中不推荐使用.live，因此您更应该使用.on方法进行事件委派。另请注意，.on在绑定到传递后代selector参数的父元素时仅具有事件委派效果。

这里有Fiddle $(document).ready()。

编辑根据OP的评论，由于您动态添加了锚标记，因此您有2个选项：事件委派（推荐）或每次重新绑定事件你添加新内容。

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

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

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

在jQuery＆lt; = 1.6.4中，您必须使用.delegate()或.live()。 .live() jQuery API page显示哪一个为每个版本提供了更好的可用性和性能。

对于jQuery＆gt; = 1.4.3＆lt; 1.7：

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

Answer 2

此代码与您的html完全一致：

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

P.S。此代码将在所有链接上运行！

jquery'Click'事件的奇怪行为

2 个答案: