0

我有一个锚标签

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

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

4

2 回答 2

7

.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

这是一个带有.$(document).ready()

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

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

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

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

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

对于 jQuery >=1.4.3 <1.7：

$('#AnchorsDivID').delegate('a', 'click', function(){
    //do something..
});
于 2012-07-08T21:34:16.660 回答
0

此代码与您的 html 完全兼容：

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

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

于 2012-07-08T21:35:32.123 回答