Problems with UI dialogs if the page gets dynamically loaded more than once

Problems with UI dialogs if the page gets dynamically loaded more than once

Hello all,

The project I am working on dynamically loads some of it's content via AJAX into a "cont" div. The function to do this is something like this :

  1.         $('#listnav a').each(function(i, el) {
  2.             $(el)
  3.             .click(function(ev) {
  4.             ev.preventDefault();
  5.             var href = $(this).attr('href');
  6.             $('#cont').fadeOut(400, function() {
  7.                 $.ajax({
  8.                 url:href,
  9.                 success:function(html) {
  10.                     $('#cont').html(html);
  11.                 },
  12.                 error:function(xhr, text, error) {
  13.                     $('#cont').html(text);
  14.                 },
  15.                 complete:function() {
  16.                     $('#cont').fadeIn(400);
  17.                 }
  18.                 });
  19.             });
  20.             });
  21.         });
This makes the href of the links in the listnav load into the cont div rather than going to a new page. I have run into some problems with UI dialog controls on these pages. If I just go to a page once the dialog works fine, but if I click on the link for the page more than one time without doing a complete page refresh my dialogs behavior becomes unpredictable. I believe this is because the dialog is being created and all it's functions are being defined in the document ready event of the page, so they are getting applied multiple times to the same element and messing things up. Could anyone give me some advice on how to handle this? How is this type of thing usually done? Any advice is really appreciated. Thanks much!