Binding elements when modal window loads from AJAX

Question

I'd like to set up a drag'n'drop list inside a modal window. The window's content is loaded via an AJAX call, so I believe I need to use jQuery's .live() method.

Here is my current code:

$('#cboxLoadedContent').live('load', function() {
    // Event for sortable page lists
    $('ul#pageList').sortable();
});

How can I set up bindings when the modal window loads? The modal window comes from the colorbox plugin.

Note: I'm guessing that 'load' is not the right event to use, because if I throw a simple alert() in there, it doesn't even show up when the window loads.

Answer 1

It depends on which modal window are you using.

If you are using the jQuery UI dialog, you can use the opendialog event.

So you can bind a function to that event that is triggered when the dialog open.

$( ".selector" ).bind( "dialogopen", function(event, ui) {
  ...
});

If you are not using the jQuery UI, you have to go to the code and look if some event is triggered when the popup opens.

Answer 2

In your case, just call .sortable() on the elements when you're loading them via ajax, like this:

$.ajax({
   url: 'page.html',
   //stuff...
   success: function(data) {
     //Put stuff in DOM
     $('ul#pageList').sortable();
   }
});

For the why part: .live() doesn't work this way, it doesn't wait for new elements and do things...it listens for events from elements that bubble up the DOM then executes event handlers if it has a selector that matches.