1

MVCアプリケーションがあります。jQueryのロードを使用してサーバーからモデルをロードしようとしています。これは完全に正常に機能します。すべてのビューが読み込まれた後、JavaScriptを実行しようとしています。そのため、jQueryを使用してjQueryのDeferedPromise機能を紹介しています。

この機能についての私の限られた理解は、以下の2ビットのコードが同じように実行されるはずだと私に信じさせました。しかし、私の「then」メソッドの実行が早すぎるように思われます。それを確認する方法がわかりません。

古いコード（作品）：

$('#OrderDetails').load('../../csweb/Orders/OrderDetails', function () {
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
});

ここで、複数のロードイベントを待機するように拡張したいと思います。ただし、簡単にするために、OrderDetailsを待ってみます。

新しいコード（機能しません）：

var onDisplayLoadSuccess = function () {
    console.log("Done!");
    console.log('Fieldset legend:', $('fieldset legend'); //Not all found.
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
};

var onDisplayLoadFailure = function () {console.error("Error.");};

$.when($('#OrderDetails').load('../../csweb/Orders/OrderDetails')).then(onDisplayLoadSuccess, onDisplayLoadFailure);

エラーが発生することはありません。コンソールに「完了」と表示されますが、タイミングが異なるようです。when / load / thenを呼び出す前にページに存在していた凡例には、クリックイベントが適用されますが、OrderDetailsによって返されるビューからロードされた凡例には、クリックイベントがバインドされていません。

対照的に、古いコードの成功関数は、クリックイベントをすべての凡例に適切に適用しました。なぜそうなるのでしょうか？

4

1 に答える 1

1

イベントをバインドした後に動的に追加された DOM 要素でイベントをキャプチャするには、それを委任する必要があります (http://api.jquery.com/on/)。

何かのようなもの：

$('fieldset').on('click', 'legend', function(){

于 2012-09-25T19:12:22.607 に答える