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

被解雇了！

我没看到什么？

Answer 1

处理锚定点击事件时，无论如何都要使用e.preventDefault();。 Fires like a charm

Answer 2

！这是经过测试和运作的。

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

$(function() {
//your code
});

Answer 3

您的第一个代码无效的原因是因为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;  
});

Answer 4

在document.ready内写下您的代码并使用e.preventDefault

写如下：

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

jquery在锚点上点击事件

4 个答案: