Initiate jQuery UI Dialog from a result of AJAX call

Answer 1

You could do that using jQuery live function with custom event binding. Everytime you make a call to Page B, you would have to trigger your custom event, so that the new dialog element can be binded in the event handler. The initiation code would have to be still in Page A if you follow this method.

Answer 2

Your approach isn't far off, you're just duplicating the dialog on the call when loading each time, so destroy the previous one, so instead of this:

$('div.dialog').dialog({ ...options... });

Call this:

$('div.dialog').dialog('destroy').dialog({ ...options... });

This prevents multiple dialogs from being instantiated for the same element. Alternatively, you can check if the dialog has been created on that element yet, like this:

$('div.dialog').filter(function() {
  return $(this).closest('.ui-dialog').length === 0;
}).dialog({ ...options... });

This creates the dialog only on <div class="dialog"> elements that aren't already wrapped in a dialog.