Question

我正在使用cluetips插件在链接上显示工具提示。在工具提示中有文本和链接 - 如果单击链接（与类'show-panel'），则灯箱类型div应在顶部打开。但是，click事件似乎并未绑定到工具提示中的链接 - 这些链接使用JQuery UI小部件。我知道灯箱脚本有效，因为它适用于工具提示框外的链接。这是在JQuery UI完成它之后的HTML。

<div id="cluetip" class="cluetip ui-widget ui-widget-content ui-cluetip clue-top-sequoia cluetip-sequoia" style="position: absolute; width: 275px; left: 126.5px; z-index: 97; top: 124px; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); display: block;">
<div class="cluetip-outer" style="position: relative; z-index: 97; overflow: visible; height: auto;">
<h3 class="cluetip-title ui-widget-header ui-cluetip-header">Sed ut perspiciatis unde omnis</h3>
<div class="cluetip-inner ui-widget-content ui-cluetip-content">
<div class="cluetip-close">
iste natus error
<a class="show-panel" rel="detailpage" href="http://www.my.link/">sit voluptatem</a>
accusantium doloremque laudantium, sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
</div>
<div class="cluetip-extra"></div>
<div class="cluetip-arrows ui-state-default" style="z-index: 98; display: block;"></div>
</div>

这是JQuery：

$("a.show-panel").click(function(e){
//alert("works");
$("#lightbox, #lightbox-panel").fadeIn(300);
e.preventDefault();
})  
$("a#close-panel").click(function(e){  
$("#lightbox, #lightbox-panel").fadeOut(300);
e.preventDefault();
})

我猜它是某种范围问题，但我不知道如何访问该链接。

非常欢迎任何建议！

Answer 1

感谢@FoRever_Zambia在他的评论中给出答案，尽管代表＆＃39;方法已经取代了＆＃39; on＆＃39;从JQuery 1.7开始的方法。

有效的代码如下。

$(".cluetip-inner").on("click", ".show-panel", function(e) {
$("#lightbox, #lightbox-panel").fadeIn(300);
e.preventDefault();  
});

Answer 2

http://api.jquery.com/bind/

$("a#close-panel").bind("click", function(){

});

编辑：对不起之前没有留下解释。您不能将绑定应用于页面加载时未出现在dom中的内容。如果您在页面中加载或创建元素（例如工具提示框），则需要使用jQuery绑定方法。

Answer 3

上面的shadylane答案很好。有时，我认为在这些场景中研究用jQuery定位的选择器同样重要。在使用像clueTip这样的东西时，有很多附加到DOM，你必须记住它可能是从插件生成的选择器，而不是实际上“存在”的任何东西。哦，还有clueTip rock！

无法在JQuery UI小部件中捕获click事件

3 个答案: