Can't capture click event within a JQuery UI widget

Question

I'm using the cluetips plug-in to display tooltips on a link. Within the tool tips there is text and a link - if the link (with class 'show-panel') is clicked then a lightbox type div should open over the top. However, the click event doesn't seem to bind to the links within the tooltips - which utilise JQuery UI widgets. I know the lightbox script works because it works on links outside the tooltip boxes. Here is the HTML after JQuery UI has done it's thing.

<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>

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

I'm guessing it's some kind of scope issue but I don't know how to access the link.

Any suggestions would be very welcome!

you should use `delegate` in this case - http://api.jquery.com/delegate/ — FoRever_Zambia, Nov 28 '11 at 14:11
Thanks so much, that works perfectly! If you put this as an answer instead of a comment I'll select it as the answer so you can get the rep points. — shadylane, Nov 29 '11 at 09:03

score 1 · Answer 1 · answered Nov 29 '11 at 12:18

Thanks to @FoRever_Zambia for the answer in his comment although the 'delegate' method has been superseded with the 'on' method as of JQuery 1.7.

Code that worked was as follows.

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

score 0 · Answer 2 · answered May 20 '13 at 17:36

The answer from shadylane above is good. Sometimes, I think it's equally as important to research the selectors you're targeting with jQuery in these scenarios. There is so much appending to the DOM when using things like clueTip, that you have to keep in mind it may be the selector being generated from the plugin, rather than anything that actually "exists". Oh, and clueTip rocks!

tom at zepsu dot com · Answer 3 · 2011-11-28T14:16:39.957

0

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

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

});

Edit: Sorry didn't leave explanation before. You can't apply binds to things that do not appear in the dom on page load. if you load or create an element into the page such as your tooltip box, you need to use the jQuery bind method.

edited Nov 28 '11 at 14:16

answered Nov 28 '11 at 14:02

tom at zepsu dot com

307
3
11

Thanks very much for your response. That seems to make sense, but it's still not working. I've changed the JQuery to the following. `$(".show-panel").bind("click", function(e){ alert("works"); e.preventDefault(); });` I replaced tooltip call with a simple alert. This function also works with the link outside of the widget. – shadylane Nov 29 '11 at 00:35

Can't capture click event within a JQuery UI widget

3 Answers3