1

いくつかのjQueryUIダイアログからのイベントを観察する必要があります。それらはすべて、あなたが聞くことができるいくつかのイベントが標準で付属しています。今のところ問題ありません。

これを使用して、関数をopenイベントにバインドできます。

$(document).bind('dialogopen', function() {});

ただし、イベントが発生したダイアログを区別する必要があります。例えば：

$('#dialog1').dialog();
$('#dialog2').dialog();

それらのいずれかを開くと、同じイベントがトリガーされます。ドキュメントにバインドされた関数は、両方のダイアログを開いたときに起動します。これは私が望んでいることではありません。私は2つの可能な解決策を見つけましたが、どちらも気分は良くありませんが、少なくともその仕事をするでしょう。

解決策1：オープンイベントのコールバック関数によってカスタムイベントをトリガーする

// Trigger events
$('#dialog1').dialog({open: function() {
        $(this).trigger('dialog1open')
    }
});
$('#dialog2').dialog({open: function() {
        $(this).trigger('dialog2open')
    }
});

// Observe events
$(document).bind('dialog1open', function() {
    //actions specifik to dialog 1 open event
});
$(document).bind('dialog2open', function() {
    //actions specifik to dialog 2 open event
});

この方法では、すべてのイベントに対して、開始時にすべてのダイアログでカスタム関数を記述し、各ダイアログに固有のイベント名で転送する必要があります。

解決策2： イベントパラメータでターゲットをキャプチャします。次のようになります。

$(document).bind('dialogopen', function(event) {
    el = event.target; // get the element triggering the event
    switch(el.id) { // Action depending on the triggers id
        case dialog1:
            //do something
            break;
        case dialog2:
            //do something else
            break
    }
});

一方、この方法では、キャプチャしたいイベントごとにスイッチケースをたくさん用意する必要があります。

ここでラッピングプラグインを作成するのは良い考えですか？id各ダイアログにを与えるように強制するプラグイン。id次に、プレフィックスまたはサフィックスとして各イベントを再トリガーします。#dialog1たとえば、開くとカスタムイベントがトリガーされdialog1openます。

アイデアや具体的な解決策はここでいただければ幸いです

編集：私が言及しなかった重要なことは、主題（Like #dialog1and #dialog2）が知らないオブザーバーがいるということです。これを考慮に入れる必要があります。

4

3 に答える 3

1

私は間違っているかもしれませんが、あなたはここで問題を考えすぎているようです。

個々のダイアログのopenイベントにバインドする場合は、ソリューション1で正しいパスをたどっていましたが、その関数に入ると、イベントは既にトリガーされているため、イベントをトリガーしたくありません。 。

// Trigger events
$('#dialog1').dialog({open: function() {
        // Don't do this.
        // $(this).trigger('dialog1open')

        // Just do what you want to do in response to this particular dialog opening.
    }
});
$('#dialog2').dialog({open: function() {
        // Again, don't do this.
        // $(this).trigger('dialog2open')

        // Just do what you want to do in response to this particular dialog opening.
    }
});

ここで、コードを再利用したい場合（AKA、おそらく応答はほとんど同じです）、別の関数を記述し、パラメーターを渡して応答をカスタマイズできます。だから...このようなもの：

$('#dialog1').dialog({
    open: openAlert("dialog1");
});
$('#dialog2').dialog({
    open: openAlert("dialog2");
});

function openAlert(dialogName) {
    alert(dialogName + " just opened up!");
}

そうすれば、ある程度再利用できますが、すべてのcaseステートメントなどは避けてください（もちろん、特定の目的のためにこれをより複雑にすることができます）。

于 2012-10-10T15:51:05.223 に答える
1

すべてのダイアログをdivでラップし、それにリスナーをアタッチします。

$("#dialog_wrapper").delegate(".dialog", "dialogopen", function(e){
    var open_dialog_id = $(this).attr("id"); //get id of child dialog

    /* do whatever */
});

しかし、私はJasCavに同意します、あなたはそれを考えすぎているかもしれません。

于 2012-10-10T15:57:51.253 に答える
0

MalSuは私を正しい方向に導きました.delegate。jQueryUIとjQueryを使用できた最新バージョンにアップグレードする.on

これが私のテスト例です

からbody

<div id="dialog1">Dialog number one</div>
<div id="dialog2">Dialog number two</div>
<button id="d1Opener">Open Dialog One</button>
<button id="d2Opener">Open Dialog Two</button>

から<script>

$(document).ready(function() {
    $('#dialog1, #dialog2').dialog({
        modal: true,
        autoOpen: false
    });
    $('#d1Opener').click(function() {
        $('#dialog1').dialog('open');
    });
    $('#d2Opener').click(function() {
        $('#dialog2').dialog('open');
    });
    $(document).on('dialogopen', function() {
        console.log('A dialog was opened');
    });
    $(document).on('dialogopen', '#dialog1', function() {
        console.log('Dialog1 was opened');
    });
    $(document).on('dialogopen', '#dialog2', function() {
        console.log('Dialog2 was opened');
    });
});
于 2012-10-10T20:02:34.730 に答える