Не удается захватить событие клика в виджете JQuery UI - PullRequest
Новая
       25

Не удается захватить событие клика в виджете JQuery UI

0 голосов
/ 28 ноября 2011

Я использую плагин cluetips для отображения подсказок по ссылке.Во всплывающих подсказках есть текст и ссылка - если щелкнуть ссылку (с классом 'show-panel'), то сверху вниз должен открыться тип лайтбокса.Однако событие click, похоже, не связывается со ссылками внутри всплывающих подсказок, в которых используются виджеты 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();
})

Я предполагаю, что это какая-то проблема с областью действия, но я незнать, как получить доступ к ссылке.

Любые предложения будут приветствоваться!

Ответы [ 3 ]

1 голос
/ 29 ноября 2011

Спасибо @FoRever_Zambia за ответ в своем комментарии, хотя метод 'делегата' был заменен методом 'on' в JQuery 1.7.

Код, который работал, был следующим. 

$(".cluetip-inner").on("click", ".show-panel", function(e) {
$("#lightbox, #lightbox-panel").fadeIn(300);
e.preventDefault();  
});
0 голосов
/ 20 мая 2013

Ответ от Шадылане выше хороший.Иногда я думаю, что не менее важно исследовать селекторы, на которые вы ориентируетесь, с помощью jQuery в этих сценариях.При использовании таких вещей, как clueTip, в DOM добавляется так много всего, что вы должны иметь в виду, что это может быть селектор, генерируемый из плагина, а не что-то, что на самом деле «существует».Ох и подсказка подсказывает!

0 голосов
/ 28 ноября 2011 
http://api.jquery.com/bind/

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

});

Редактировать: Извините, не оставил объяснение раньше. Вы не можете применять привязки к вещам, которые не отображаются в домене при загрузке страницы. если вы загружаете или создаете элемент на странице, например окно всплывающей подсказки, вам необходимо использовать метод привязки jQuery.

...