jQuery UI Dialog behaves unpredictably

问题

The jQuery UI dialog drives me up the walls. To the best of my understanding, here's how it works:

When you do $('#myDialog').dialog({...}), it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag. This is crazy! It will duplicate possibly unique DOM elements (with ids) when it does this.

So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog). If I do this dynamically, sometimes the dialog doesn't open any more:

http://jsfiddle.net/t67y7/3/

Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way). What is up with this?

回答1:

Why don't you just call $("#dialogId").dialog("destroy") on close function, like this:

$("#dialogId").dialog({
     close: function() {
         $(this).dialog("destroy");
         // you may want empty content after close if you use AJAX request to get content for dialog
         $(this).html('');
     }
}

The destroy function will remove the decorated code, and your dialog element will not be duplicate next time you show the dialog.

I added a sample code to jsfiddle.net example.

回答2:

Since nobody seems to have any idea how to tame this beastly dialog, here's the best thing I've come up with to date. I'll accept any superior alternatives.

var original = $('#dialogId')[0];
var clone = $(original).clone().attr('id', 'dialogIdClone');
var saveHtml = $(original).html();
$(original).html('');
$(clone).dialog({
    ... // other options
    open: function (){
        // add any dynamic behavior you need to the dialog here
    },
    close: function(){
        $(clone).remove();
        $(original).html(saveHtml);
    }
});

The purpose of this whole craziness is to keep the HTML of the original dialog unique on the page. I'm not really sure why this can't be the built-in behavior of the dialog... Actually, I don't understand why jQuery UI needs to clone the HTML to begin with.

回答3:

I know this has been posted for a while, but a less extensive way to handle this issue would be:

$('#your-dialog').dialog({
    ... // other options
    open: function (){
        // add any dynamic behavior you need to the dialog here
    },
    close: function(){

    }
});
$('#your-dialog').remove();

This is due to dialog widget wants to be able to control the display and will wrap the inner content of the original dialog then create a brand new one at the bottom of the body.

The draw back of this solution is that the dialogs have to be the first to be initialized to ensure all your 3rd party library widget will operate properly.

回答4:

You need to empty the dialog before opening it.

$("#dialogId").html('');
$("#dialogId").dialog({
 close: function() {
     $(this).dialog("destroy");
 }
}

来源：https://stackoverflow.com/questions/7099938/jquery-ui-dialog-behaves-unpredictably

标签

jquery-ui-dialog