Dialog no longer works with detached elements

[GSPP]

The following code worked in an earlier version of jQuery and jQuery UI. Using the latest versions as of today the dialog does not show up. This seems to be a regression. No errors are logged.

    var dialogContents = $.parseHTML('<div>x</div>');

    //$('body').append(dialogContents); //uncomment to make this work

    $(dialogContents).dialog({ });

[Scott González]

This is not a bug or regression in jQuery UI, it is a behavior change in jQuery core. As of jQuery 3.0.0, $.parseHTML() will create the elements in the context of a new document. jQuery UI is document-aware and will only interact with the document that the original element came from. Since that document isn't visible, the generated dialog isn't visible.

To fix this, simply pass the document as the context for $.parseHTML():

var dialogContents = $.parseHTML('<div>x</div>', document);
$(dialogContents).dialog({ });

[GSPP]

Thanks! That explains why I saw "body" in the parents() of that element! It's just a different body. Sorry for submitting a non-bug. I could not find this issue explained elsewhere on the web.

My actual fix was:

var dialogContents = $('<div>x</div>');
dialogContents.dialog({ });

Because the HTML that I use is suitable for the $ function (it starts with '<' and is a constant). Hope this helps others who find this.