Locating an element in a 'Facebox' box

Question

Heres my link:

http://tinyurl.com/6j727e

If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.

I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.

    $('#facebox .hero-link').click(alert('click!'));

However, it doesn't detect a click and oddly enough the click event runs when the page loads.

The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.

Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)

Answer 1

First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.

The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.

Option 1) Bind the click event only after the facebox is revealed. Something like:

$(document).bind('reveal.facebox', function() {
  $('#facebox .hero-link').click(function() { alert('click!'); });
});

Option 2) Look into using the jQuery Live Query Plugin

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:

$('#facebox .hero-link').click(function() { alert('click!'); });

Answer 2

Alternatively use event delegation

This basically hooks events to containers rather than every element and queries the event.target in the container event.

It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)

Quick example here

jQuery plugin for easy event delegation

P.S event delegation is pencilled to be in the next release (1.3) coming very soon.