jQuery jquery点击锚点事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5443469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery click event on anchor
提问by djeetee
Here's the snippet of html i have:
这是我拥有的 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>
I'd like to set up a click handler to respond to the user's click on the anchor tags. Here's the test code:
我想设置一个点击处理程序来响应用户对锚标记的点击。这是测试代码：
$("#tag-cloud-widget .content a").click(function(e) {
alert('clicked');
return false;
});
The click handler above does not get fired and neither does this:
上面的点击处理程序不会被触发，这也不会：
$("#tag-cloud-widget .content .cloud-element").click(function(e) {
alert('clicked');
return false;
});
However,
然而，
$("#tag-cloud-widget .content").click(function(e) { ... });
and
和
$("#tag-cloud-widget").click(function(e) { ... });
do get fired!
被解雇！
What am I not seeing???
什么我没看到？？？
回答by rsplak
When handling anchor click events, always use e.preventDefault();when you don't need the anchor anyway.
Fires like a charm
处理锚点单击事件时，请始终e.preventDefault();在您不需要锚点时使用。
火一样的魅力
回答by danidacar
!THIS is tested and working.
！这是经过测试和工作的。
You forgot to put your code inside the document ready function
您忘记将代码放入文档就绪函数中
$(function() {
//your code
});
回答by Bilal Rabi
Write your code inside document.readyand use e.preventDefault
在里面写你的代码document.ready并使用e.preventDefault
Write like given below :
写如下：
$(document).ready(function(){
$("#tag-cloud-widget .content a").click(function(e) {
e.preventDefault();
alert('Clicked');
return false;
});
});
回答by Kushal
The reason why your first code doesn't work because there are multiple anchors in your div contenttag, hence when you associate anchor that resides in that tag with a click, it will generate ambiguity to in choosing exact anchor. You can target particular anchor by using its idattribute, and than associate the idwith your events to target particular anchor. So the code will be as follows.
您的第一个代码不起作用的原因是您的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>
And following will associate clicks to particular anchor.
以下将点击与特定锚点相关联。
$("#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;
});
