Question

我正在尝试实现一个jquery ui对话框。以this code为基础，我成功了。但我宁愿使用元素的类而不是ID。因此，我将代码修改为：

$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        console.log($(this).parents('.shipping_sector')); //correctly returns the parent fieldset
        $(this).parents('.shipping_sector').find(".shipping_dialog").dialog();
        return false;
    });
});

该对话框第一次运行，但一旦关闭，它将无法再次打开。尽管它在源示例中按预期工作。我怎么会损坏它？

jsbin

Answer 1

jQuery对话框的工作方式是，它们将对话框的HTML从DOM中的当前位置取出，并在DOM的底部放置一个新的div。当您打开对话框时，新位置的定义如下所示。

因此，您的HTML不在原处，使用find的选择器无法找到任何内容。

您必须直接使用id或类名，但如果您使用该类有多个元素，则最好使用标识符。

我们在项目中做了什么，我们专门为对话框设计了一个新的div，然后我们知道它是哪一个。您可以将实际内容放入新容器中，也可以clone()将其放入容器中。与此类似：

var $dialog = $('<div id="dialog-container"></div>')
var $content = $(this).parents('.shipping_sector').find(".shipping_dialog");

var $clonedContent = $(this).parents('.shipping_sector').find(".shipping_dialog").clone() // use clone(true, true) to include bound events.

$dialog.append($content); // or $dialog.append($clonedContent);

$dialog.dialog();

但这意味着您还必须稍微重新构建代码以处理它。

此外，当对话框被销毁时，它不会再将HTML移回原来的位置，因此我们手动将其放回原位。请注意，我们正在使用jQuery 1.7，我不知道这是否仍然是1.9中的相同问题。

对话是非常棘手的，但是如果你使用与上面类似的东西，你可以创建一个自定义的div，并给它一个唯一的id你有很大的自由。

打开对话框时新HTML的样子：

<div style="display: block; z-index: 1003; outline: 0px; position: absolute; height: auto; width: 300px; top: 383px; left: 86px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-1">Contact form</span>
        <a
        href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span>
            </a>
    </div>
    <div class="shipping_dialog ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 91.03125px; height: auto;"
    scrolltop="0" scrollleft="0">
        <p>appear now</p>
    </div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"
    style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>

Answer 2

您目前的代码是：

$(".OpenDialogOnClick").dialog();

只需将其更改为：

$(".OpenDialogOnClick").clone().dialog();

Voila，你的HTML永远不会被销毁/删除：）

Answer 3

可能是对话框的父母结构发生了变化。

尝试将其更改为

//jquery dialog functions
$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        //console.log($(this).parents('.shipping_sector'));
        $(".shipping_dialog").dialog();
        return false;
    });
});

jsbin

Answer 4

如果您不介意每次都创建一个新对话框，您实际上可以销毁对话框并将内容移回其先前的位置。这样，在下一次点击时，该过程将重复进行。

//jquery dialog functions
$(document).ready(function() {
    $(".add_shipping_address").click(function() {
        var sector = $(this).parents('.shipping_sector');
        sector.find(".shipping_dialog").dialog({
            close: function(event, ui) 
            { 
                $(event.target).dialog('destroy');
                $(event.target).appendTo(sector);
            }
        });
        return false;
    });
});

jsbin

一旦关闭，jquery ui对话框将不会重新打开

4 个答案:

打开对话框时新HTML的样子：