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クラス要素のクリックで実行される open dialog メソッドは、ダイアログ内でクリックするたびにトリガーされるため、これが必要です。ダイアログがその親の中に含まれ、クリックが.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 に答える