4

我正在尝试实现一个 jquery ui 对话框。使用此代码作为基础，我成功了。但我宁愿使用元素的类而不是 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

4

4 回答 4

4

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

因此您的 HTML 不在原来的位置，并且您的选择器使用find不会找到任何东西。

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

我们在项目中所做的工作是为对话框制作一个带有 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>
于 2013-02-04T20:30:58.650 回答
3

您当前的代码是：

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

只需将其更改为：

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

瞧，您的 HTML 将永远不会再次被破坏/删除 :)

于 2013-11-12T11:40:56.493 回答
1

可能是对话的育儿结构发生了变化。

尝试将其更改为

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

jsbin

于 2013-02-04T20:27:36.143 回答
1

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

//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

于 2013-02-04T21:00:48.570 回答