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

时间:2013-02-04 20:20:22

标签: jquery jquery-ui

我正在尝试实现一个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

4 个答案:

答案 0 :(得分:4)

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>

答案 1 :(得分:3)

您目前的代码是:

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

只需将其更改为:

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

Voila,你的HTML永远不会被销毁/删除:)

答案 2 :(得分:1)

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

尝试将其更改为

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

jsbin

答案 3 :(得分: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