锚点上的jquery单击事件答案

【问题标题】：jquery click event on anchor锚点上的jquery单击事件
【发布时间】：2011-07-23 13:01:40
【问题描述】：

这是我拥有的 html 的 sn-p：

<div id="tag-cloud-widget">  
    <div class="content">  
        <a href="#" rel="1" class="cloud-element" data-tag-id="10" style="font-size: 12px; color: rgb(205, 236, 222); ">T1</a>  
        <a href="#" rel="1" class="cloud-element" data-tag-id="1" style="font-size: 12px; color: rgb(205, 236, 222); ">T2</a>  
        <a href="#" rel="1" class="cloud-element" data-tag-id="3" style="font-size: 12px; color: rgb(205, 236, 222); ">T3</a>  
    </div>
</div>

我想设置一个点击处理程序来响应用户对锚标记的点击。下面是测试代码：

$("#tag-cloud-widget .content a").click(function(e) {
    alert('clicked');  
    return false;  
});

上面的点击处理程序不会被触发，这也不会：

$("#tag-cloud-widget .content .cloud-element").click(function(e) {  
    alert('clicked');  
    return false;  
});

然而，

$("#tag-cloud-widget .content").click(function(e) { ... });

和

$("#tag-cloud-widget").click(function(e) { ... });

一定要被解雇！

我没看到什么？？？

【问题讨论】：

您的第一部分 jQuery 在 Chrome 和 IE 8 中适用于我：demo

标签： jquery events click href

【解决方案1】：

在处理锚点点击事件时，始终使用e.preventDefault();，当您不需要锚点时。 Fires like a charm

【讨论】：

我实际上尝试过使用和不使用 e.preventDefault();我发现了问题所在。愚蠢的东西！好的，锚点是从模板 DOM 元素动态创建的。我克隆并更新模板元素的属性并将其附加到标签云内容中。我忘记使用 'true' 标志调用 .clone() 来复制所有关联的事件处理程序。一旦我将代码更改为 .clone(true) ，所有工作都像魅力一样 :) 谢谢你和其他所有回复如此迅速的人。干杯！
我很高兴一切都为你解决了，你得到了一切！祝你的项目好运！

【解决方案2】：

您的第一个代码不起作用的原因是因为您的div content 标记中有多个锚点，因此当您将驻留在该标记中的锚点与点击相关联时，它会在选择确切的锚点时产生歧义。您可以使用其id 属性来定位特定锚点，然后将id 与您的事件关联以定位特定锚点。所以代码如下。

<div id="tag-cloud-widget">  
    <div class="content">  
        <a href="#" rel="1" class="cloud-element" id="anca" data-tag-id="10" style="font-size: 12px; color: rgb(205, 236, 222); ">T1</a>  
        <a href="#" rel="1" class="cloud-element" id="ancb" data-tag-id="1" style="font-size: 12px; color: rgb(205, 236, 222); ">T2</a>  
        <a href="#" rel="1" class="cloud-element" id="ancc" data-tag-id="3" style="font-size: 12px; color: rgb(205, 236, 222); ">T3</a>  
    </div>
</div>

以下会将点击与特定锚点相关联。

$("#tag-cloud-widget .content #anca").click(function(e) {
    alert('Anchor A clicked');  
    return false;  
});

$("#tag-cloud-widget .content #ancb").click(function(e) {
    alert('Anchor B clicked');  
    return false;  
});

$("#tag-cloud-widget .content #ancc").click(function(e) {
    alert('Anchor C clicked');  
    return false;  
});

【讨论】：

JQuery 应该将事件处理程序应用于匹配选择器的所有元素。在这种情况下，click 事件处理程序应该应用于所有三个锚点。
那么，如果三个锚点共享共同的点击方法，你如何区分点击的是哪个锚点？
通常，您会使用this 关键字来获取当前元素，或者如果您使用的是JQuery，您可以使用$(this) 来获取该元素的JQuery 对象。因此，要使用您的代码，您可以为所有元素的点击事件创建相同的函数，然后执行以下操作：alert(this.id + " clicked!);。第一个会显示“anca Clicked”，第二个会显示“ancb clicked”，依此类推。
@Karl Nicoll：好的，所以为了执行特定操作，this.id 可用于通过条件链区分锚点。谢谢。 :-)

【解决方案3】：

！这已经过测试并且可以正常工作。

您忘记将代码放入文档就绪函数中

$（函数（）{ //你的代码 });

【讨论】：

下面给出的两个代码 sn-ps 按照@djeetee 所说的那样工作，所以情况并非如此。
@Kush你错了，脚本放在dom内容之前，所以没有正确应用。我已经准备好文档进行了测试，它工作正常。

【解决方案4】：

在document.ready 中编写您的代码并使用e.preventDefault

如下所示：

$(document).ready(function(){
    $("#tag-cloud-widget .content a").click(function(e) {
        e.preventDefault();
        alert('Clicked');  
        return false;  
    });
});

【讨论】：