无法捕获JQuery UI小部件中的点击事件

我正在使用提示插件在链接上显示工具提示。在工具提示中有文本和链接 - 如果点击链接（带有类'show-panel'），则应该在顶部打开lightbox类型div。然而，点击事件似乎并没有绑定到工具提示中的链接 - 它们利用了JQuery UI小部件。我知道灯箱脚本可以工作，因为它可以在工具提示框外的链接上工作。这是JQuery UI完成它之后的HTML。无法捕获JQuery UI小部件中的点击事件

<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(); 
})

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

任何建议将非常欢迎！

来源

2011-11-28 shadylane

你应该在这种情况下使用'delegate' - http://api.jquery.com/delegate/ –

非常感谢，完美的作品！如果你把这个作为答案而不是评论，我会选择它作为答案，这样你就可以得到代表点。 – shadylane

欢迎您:) –

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

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

});

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

来源

2011-11-28 14:02:04

非常感谢您的回复。这似乎是有道理的，但它仍然无法正常工作。我已经将JQuery更改为以下内容。（）“;”（）“; e.preventDefault（）; }）;' 我用工具提示替换了工具提示简单的警报。该功能也适用于小部件外部的链接。 – shadylane

感谢@FoRever_Zambia在他的评论中给出了答案，尽管'delegate'方法已被JQuery 1.7的'on'方法所取代。

工作的代码如下。

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

来源

2011-11-29 12:18:56 shadylane

答案从上面shadylane好。有时候，我认为在这些场景中研究您使用jQuery定位的选择器同样重要。当使用clueTip之类的东西时，对DOM附加的东西太多了，你必须记住它可能是从插件生成的选择器，而不是实际“存在”的任何东西。哦，并提示岩石！

来源

2013-05-20 17:36:31

无法捕获JQuery UI小部件中的点击事件

回答

相关问题