1

我有以下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" );
 });

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

谢谢您的帮助。

4

1 回答 1

2

这是 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

于 2013-04-20T08:41:43.830 回答