脚本生成元素上的jquery click事件

Question

I have this script:

<script>
    $(document).ready(function() {
       $('.block-link').click(function() {
          $('body').addClass("gallery-on");
       });

       $('body').delegate('.ps-toolbar-close', 'click', function() {
          $('body').removeClass("gallery-on");
          });
       });
</script>

The script is supposed to add the class .gallery-on to the body when i click on any .block-link .
The .ps-toolbar-close element is generated through a plugin (pretty good btw!) that create a modal lightbox when any .block-link is clicked.

The first part of the script is working, the second is supposed to remove the .gallery-on class from the body, but it just close the lightbox and let the body class where it is.

What am i doing wrong? i'm a beginner with javascript and jquery unfortunately..

My best guess is that since .ps-toolbar-close is not yet present in the document when the page loads, no click handler is placed for the second part of the script, though i thought that .delegate() was able to handle not yet existing elements, am i wrong?

Thanks for any help!

Answer 1

Most likely this is due to an interesting property of the delegate method. From the jQuery documentation:

Additional Notes:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

The close method for the modal dialog is being attached lower down in the DOM and is being called prior to your body handler and preventing your handler firing correctly.

Try binding to the close event for the dialog and removing the class there.