Find an item in the Front Panel box

Question

Here is my link:

http://tinyurl.com/6j727e

If you click the link in test.php, it will open in a modal field that uses the jQuery 'facebox' script.

I am trying to affect the click event in this field, and if you look at the source of test.php, you will see where I am trying to hide the link in the modal field.

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

However, it does not detect a click and, oddly enough, the click event fires when the page loads.

The close button has, however, a click event that closes the window, and I suspect that my home click event is somehow prevented, but I cannot figure it out.

Can anyone help? As a rule, this is the last part of the project and its support, as always: wink.gif

Answer 1

Firstly, the reason you get a warning when loading a document is because the #click method takes a function as an argument. Instead, you passed it an alert return value that immediately displays a warning dialog and returns null.

The reason the event binding does not work is because the #facebox .hero-link does not exist while the document is loading. I think you have two options that will help you fix this.

Option 1) Bind a click event only after the mac opens. Sort of:

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

Option 2) Take a look at jQuery Live Query Plugin

Live Query leverages the power of jQuery selectors by binding events or automatically triggering callbacks for matched elements, even after loading the page and updating the DOM.

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

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

Answer 2

Alternatively use event delegation

It basically captures events in containers, not every element, and requests event.target in a container event.

It has many advantages in that you reduce the noise level of the code (there is no need to reinstall), it is also easier in the browser memory (fewer events related to dom)

Quick example here

jQuery plugin to simplify event delegation

PS event transfer in pencil to be in the next version (1.3) very soon.