将 jQuery UI 对话框附加到其父级答案

【问题标题】：Append jQuery UI dialog to its parent将 jQuery UI 对话框附加到其父级
【发布时间】：2013-04-20 21:23:48
【问题描述】：

我有以下html：

<ul id="sortable">
<li class="ui-state-default">1
    <div class="dialog-modal" title="Animal Facts" style="display:none;">
    <p>What is the fastest animal on Earth?</p>
    </div>
  </li>
<li class="ui-state-default">2
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the largest animal on Earth?</p>
</div></li>

以及以下 jQuery 代码：

$( ".dialog-modal" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
        });

$('.ui-state-default').click(function() {
    $(this).find("div").dialog( "open" );
 });

这不会在点击时打开模态对话框，我错过了什么？

感谢您的帮助。

【问题讨论】：

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

这是 jQuery UI 对话框的当前行为。

定义后，jQuery UI 对话框被创建并附加到正文中。

解决方案是在创建后将对话框附加到其原始父级：

$(function () {
    $(".dialog-modal").each(function (index) {

        var origContainer = $(this).parent();

        $(this).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            create: function () {
                $(this).closest('div.ui-dialog')
                    .click(function (e) {
                    e.stopPropagation();
                });
            }
        }).parent().appendTo(origContainer);
    });

    $('.ui-state-default').click(function (event) {
        $(this).find("div").find(".dialog-modal").dialog("open");
    });
});

重要说明：查看定义的create事件；这是必要的，因为在.ui-state-default 类元素单击上执行的打开对话框方法会在对话框内的每次单击时触发！它在形式上是正确的，因为现在对话框包含在其父级中，并且单击通过.ui-state-default 类传播给父级。有了stopPropagation，问题就解决了。

这有点骇人听闻，但它确实有效。

工作小提琴：http://jsfiddle.net/IrvinDominin/Avtg9/8/

jQuery UI 1.10.0 的未来版本将添加选项appendTo，以处理这种情况而无需任何解决方法http://api.jqueryui.com/dialog/#option-appendTo

【讨论】：