锚点上的jquery点击事件
锚点上的jquery点击事件
提问于 2011-03-26 23:59:28
下面是我拥有的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) { ... }); 一定要被解雇！
我没看到什么？
Stack Overflow用户
发布于 2011-03-27 00:05:16
你的第一个代码不能工作的原因是在你的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;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5443469
复制相关文章
相似问题
腾讯云开发者
