jQuery dialog duplicating with AJAX calls

I have searched the internet looking for the answer to this, but to no avail...

Solutions I have found break another aspect of the functionality.

I have links, that when clicked, load a page into a jQuery tab using AJAX. With that page, there are multiple selects that I have put into jQuery dialogs instead, to save space on the page. These are shown by clicking links on the page loaded with AJAX. When options are selected and the dialog is closed, the selected options are added to a list.

My problem is that when another AJAX call is made for another similar page. When you click the link to open the dialog, two dialogs open. Top layer => oldest dialog. Bottom layer => newest dialog.

These links point to jsFiddle mockups:

1. http://jsfiddle.net/davidgracie/Z3bjy/ - d开发者_如何学Pythonoesn't destroy or remove dialogs but allows "Open Dialog" link to be click multiple times
2. http://jsfiddle.net/davidgracie/fr5y5/ - does destroy and remove dialogs but "Open Dialog" link can only be clicked once

Obviously, none of these are what I'm looking for. I want the dialogs to be destroyed but the user can still open them up again without reloading the page.

Hope this is clear...

Thanks in advance.

http://jsfiddle.net/jensbits/fr5y5/4/

Created a function for adding dialog content to page. Previously, it was only added on link click. Now added on link click and dialog open.

Changed $(this).dialog('destroy'); to $('.test-select').dialog('destroy');.

Commented out unnecessary code.