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 の現在の場所から取り出し、新しいdivものを DOM の下部に配置することです。ダイアログを開くと、新しい場所が以下のように定義されます。

したがって、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() {
        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 に答える
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 に答える