Losing events in modal window

Hi,

I have a static (not AJAX) div with a form inside. I have a JavaScript which attaches event handlers to these form elements. This all works fine until I turn the div into a modal -- suddenly my events don't work anymore. I'm assuming this is because Control.Modal actually takes the element out of where it originally was in the DOM and puts it into body > div #modal_container. So how do I keep my events attached?

Example JS: This is loaded inline immediately after the modal div is defined.

    //attach event handlers to checkboxes:
    Event.observe( window, 'load', function() {
      $('pubSelect').getInputs().each( function(s) {
        s.observe( 'click', function(evt) {
          alert('test'); 
        });
      });
    });
    //THE ABOVE EVENTS ARE FIRED if this next statement is commented out:
    //use Control.Modal to hide this dialog:
    new Control.Modal('pubSelectLink', {
      opacity: 0.6,
      fade: true,
      fadeDuration: 0.3
    });

Posted October 16th, 2007 at 2:19pm by tomstrummer

Just to clarify... 'pubSelect' is a form inside my modal dialog. And the behavior is the same if I do 'new Control.Modal(...' before or after attaching the events.

Thanks!

Posted October 17th, 2007 at 7:34am by tomstrummer

Ah, nevermind. I realized I needed to apply the events in the 'afterOpen' callback.

Here's my final JS:

    var opts = $H({
      containerClassName : 'pubSelectDialog',
      afterOpen : function() { //alert( 'test!' ); }
        $('pubSelect').getInputs().each( function(s) {
          s.observe( 'click', function(evt) {
            alert( 'test!' );
          });
          if( s.checked ) togglePubSelect( s );
        });
      }
    }).merge( defaultModalOptions );
    var pubSelectDialog = new Control.Modal('pubSelectLink', opts );

Posted October 17th, 2007 at 7:53am by tomstrummer