無法捕獲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小部件中的點擊事件

回答

相關問題