jQuery点击事件在锚点上

Question

这是我拥有的 HTML 代码片段：

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

被解雇了！

我没有看到什么？？？

- djeetee

---

您的jQuery的第一个部分在Chrome和IE 8中可以正常工作：演示。 - Scoobler

Answer 1

处理锚点点击事件时，如果你不需要该锚点，请始终使用e.preventDefault();。像魅力一样触发。

- user657496

---

我实际上尝试了带和不带e.preventDefault(); 我找到了问题所在。很傻的事情！好的，锚点是从模板DOM元素动态创建的。我克隆并更新模板元素的属性，并将其附加到标签云内容中。我忘记使用'true'标志调用.clone()以复制所有关联的事件处理程序。一旦我将代码更改为.clone(true)，一切都像魔术般地运行:)谢谢你和其他那么快回应的人。干杯！ - djeetee

很高兴一切都为你顺利解决了，你已经把所有东西都搞定了！祝你的项目好运！ - user657496

Answer 2

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

你忘记把你的代码放在文档准备好的函数里了。

$(function() {
//你的代码
});

- johnlemon

---

以下两段代码片段按照@djeetee所说的正常运行，所以不是这个问题。 - Kushal

@Kush，你错了，脚本放在DOM内容之前，所以它没有正确应用。我用document ready测试过了，它可以正常工作。 - johnlemon

Answer 3

你的第一段代码不能正常工作是因为在你的

内容

标签中有多个锚点，因此当你将该标签中的锚点与点击关联时，会产生歧义以选择确切的锚点。你可以通过使用锚点的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;  
});

- Kushal

---

JQuery 应该将事件处理程序应用于与选择器匹配的所有元素。在这种情况下，click 事件处理程序应该应用于所有三个锚点。 - Karl Nicoll

如果三个锚点共享公共点击方法，你怎么区分哪个锚点被点击了呢？ - Kushal

通常情况下，您可以使用 this 关键字获取当前元素，或者如果您正在使用 JQuery，则可以使用 $（this） 获取该元素的 JQuery 对象。因此，要使用您的代码，您可以为所有元素的点击事件创建相同的函数，并执行以下操作：alert（this.id +“ clicked！”）; 这将显示“anca Clicked”（第一个元素），以及“ancb clicked”（第二个元素）等等。 - Karl Nicoll

@Karl Nicoll：好的，为了执行特定的操作，可以使用this.id来通过条件链区分锚点。谢谢。 :-) - Kushal

Answer 4

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

按照以下方式编写：

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

- Bilal Rabi