jquery - 单击时显示消息

Question

我有一个像这样的 HTML 标记，什么时候，

<span class="placesBostPageHelpBg  placesBostHelpBg floatLeft voteHelpToolTip" id="HelpToolTipButton2">
<span class="placesBostHelpText">?</span>
</span>

用于 Wrapper Span 的 CSS 是

.placesBostPageHelpBg {
background:none repeat scroll 0 0 #171716;
color:#63E6F4;
cursor:pointer;
height:20px;
left:5px;
position:relative;
top:-2px;
width:20px;
z-index:1;
-moz-border-radius:10px 10px 10px 10px;
}

用于问号的CSS

.placesBostHelpText {
left:6px;
position:absolute;
top:2px;
z-index:2;
}

输出就像一个圆圈，圆圈内有问号。当任何用户单击该圆圈时，我必须显示一条消息。它工作正常。 但我的问题是，当我点击圆圈时，圆圈会显示一条消息，但当我点击问号时，消息不会显示。

使用 Java 脚本

$('#HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

Answer 1

$('#HelpToolTipButton2').click(function() {$('#voteHelpMessageContainer2').toggle();});

由于 span 是 circle 元素的子元素，因此单击该 span 将导致事件冒泡。为防止出现这种情况，请将 return false; 放在点击函数的末尾。

$("span.placesBostHelpText").click(function(){
     $('#voteHelpMessageContainer2').hide();
     return false;
});