jQuery Dialog moveToTop Issue

问题

jQuery UI v1.10 seems to have an issue with stacking multiple dialogs on a page where it will refresh all open dialogs when any dialog is clicked.

Here are some fiddles. Using the same code:

HTML

<div id="div1" class='d' data-isrc='http://www.slashdot.org'>
</div>
<div id="div2" class='d' data-isrc='http://www.cnn.com'>
</div>

JS

var opts = {
    height: 200,
    width: 300,
    autoOpen: true,
    open: function(){
        var src = $(this).data("isrc"),
            $iframe = $("<iframe seamless='seamless' src='" + src + "'>");

        console.log(src);
        $(this).append($iframe);

    }
};
$("#div1").dialog(opts);

$("#div2").dialog(opts);

This fiddle is using jQuery 1.9.1 and jQueryUI 1.9.2, and behaves how I need it: http://jsfiddle.net/REmJb/

This fiddle is using jQuery 2.0.2 and jQueryUI 1.10.3, and shows the problem: http://jsfiddle.net/UBV4v/

How can I make the above link work smoothly [without refreshing] on the newer jQuery framework?

ETA: It seems this gets tracked down to a new approach on the insertBefore() method. Quoting the documentation:

Before jQuery 1.9, the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the .end() method reliably when being used with an unknown number of elements.

... but the issue is not present for v1.9 so perhaps not.

回答1:

This is what I added to my scripts to disable this behaviour.

jQuery.ui.dialog.prototype._moveToTop = function(event, silent) {
    return true;
};

My Question

来源：https://stackoverflow.com/questions/17799023/jquery-dialog-movetotop-issue