无法在 JQuery UI 小部件中捕获点击事件答案

【问题标题】：Can't capture click event within a JQuery UI widget无法在 JQuery UI 小部件中捕获点击事件
【发布时间】：2013-05-21 01:36:31
【问题描述】：

我正在使用线索提示插件在链接上显示工具提示。在工具提示中有文本和链接 - 如果单击链接（带有类“显示面板”），则灯箱类型 div 应该在顶部打开。然而，点击事件似乎并没有绑定到工具提示中的链接——它利用了 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();
})

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

非常欢迎任何建议！

【问题讨论】：

在这种情况下你应该使用delegate - api.jquery.com/delegate
非常感谢，效果很好！如果您将此作为答案而不是评论，我会选择它作为答案，以便您获得代表点数。

标签： jquery jquery-ui cluetip

【解决方案1】：

感谢@FoRever_Zambia 在他的评论中的回答，尽管从 JQuery 1.7 开始，'delegate' 方法已被 'on' 方法取代。

有效的代码如下。

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

【讨论】：

【解决方案2】：

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

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

});

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

【讨论】：

非常感谢您的回复。这似乎是有道理的，但它仍然不起作用。我已将 JQuery 更改为以下内容。 $(".show-panel").bind("click", function(e){ alert("works"); e.preventDefault(); }); 我用一个简单的警报替换了工具提示调用。此功能也适用于小部件外部的链接。

【解决方案3】：

上面shadylane的回答很好。有时，我认为在这些场景中研究您使用 jQuery 定位的选择器同样重要。使用诸如线索提示之类的东西时，DOM 有很多附加内容，您必须记住，它可能是从插件生成的选择器，而不是任何实际“存在”的东西。哦，还有线索提示！

【讨论】：