JQuery UI Dialog query dialog DOM

Question

The following simply loads a jquery-ui dialog from an external html file.

$('#showdialog').click(function(e) {
    var div = $('<div>loading...</div>');
    div.dialog({
        modal: true,
        open: function() { div.load('anotherpage.html'); }
    });
    e.preventDefault();
});

After the DOM loads from the external html file, I'd like to interrogate it with JQuery. For example, supposing anothorpage.html had a bunch of anchors on it, I'd like to wire up click handlers for them when it loads into the dialog.

Any ideas?

Answer 1

Look into using .live() or .delegate(), which will allow you to attach handlers to events on elements within the dynamically loaded content.

For example:

$(document).ready( function() {
    $('div.yourDynamicContainer a').live('click', function() {
        doSomething()
    })
})

Answer 2

You can define more then one parameter of jQuery.load (see http://api.jquery.com/load/) so after load is done you can do something:

div.load('anotherpage.html', function() {
  alert('Load was performed.');
});

place code which you need instead of alert.