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!

Answer 1

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.

Answer 2

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

Answer 3

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!