2

jQuery チェーンを正しく理解していれば、リストの最初のメソッドが実行され、次のメソッドが実行される前に完了する必要があります。そのため、私は次のものを持っています

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
}

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select")
      .on("change", function(event){
          $('#OOM_vs_Logged').loadUrl(//ajax method call in the global site.js file//);})
      .reportZebraStriper();


})

最初のページの読み込みでは、すべてが期待どおりに実行され、コンソールは $.fn.reportZebraStriper() から出力を取得します。「oom_display_options」ドロップダウンを変更すると、ajax が起動され、コンテンツ DIV がリロードされますが、reportZebraStriper() はあとがきを起動しません。

ここで何が間違っていますか？

編集 1: loadURL() メソッド定義の場所。これは、jQ に組み込まれている .ajax() メソッドの単なるラッパーです。ajaxの実行中などにアニメーションを表示します。

$.fn.loadUrl = function(url, dataAjax) {
    var target = this;
    target.addBlockLoadingDiv();

    return $.ajax({
        type: "POST",
        url: url,
        data: dataAjax,
        success: function(data) {
            if (data) {
                target.html(data);
            } else {
                target.text("Unable to display requested data, sorry.");
            }
        },
        error: function(err) {
            target.html(err.response);
        }
    });
};

jQ の load() メソッドは、コールバック メソッドの実行をすぐに呼び出すように見えます (Im が間違っていない限り)。この不便さ。私たちが必要としているものです。

編集 2: ajax 呼び出しの 'complete:' が起動されたときに、この logi に固有の ajax 呼び出しを作成し、$().reportZebraStriper() メソッドを呼び出します。私が探していた解決策ではありませんが、うまくいきました。

4

6 に答える 6

0

Javascript の同期と非同期の入門書が必要なだけかもしれません。

Javascript はシングルスレッドで実行され、実行中にページがフリーズします。つまり、Javascript の実行が完了するまで、ページのレンダリングに加えた変更はなく、既存の Javascript の実行中に発生するイベントは、現在実行中の Javascript が終了するまで待機します。イベントは、クリックまたは AJAX 呼び出しの完了である可能性があります。

あなたが指摘したように、jQueryはほとんどの（すべてではない）呼び出しの最後にそれ自体を返します（これはあまり文書化されていません）。「change」イベントに結び付けるために使用している .on() 呼び出しは jQuery オブジェクトを返すため、これらは同等です。

$("#oom_display_options select").on("change", function(){})
  .reportZebraStriper();

と

var oom = $("#oom_display_options select");
oom.on("change", function(){});
oom.reportZebraStriper();

実際に起こっていることは、#oom_display_options タグ内のすべての選択タグを指す jquery オブジェクトが作成されることです。次に、.on() 呼び出しが実行され、onchange イベントがすべての選択タグに割り当てられます。変更ごとに実行されるコードは、.on('change', ...) 呼び出しに渡される関数にあります。最後に、reportZebraStriper() が jquery オブジェクトに対して実行されますが、何も興味深いことはありません。

イベント ハンドラーに .reportZebraStriper() がないため、選択ボックスが変更されたときに実行されるコードの一部ではありません。

.loadUrl() への呼び出しが何をするかを伝えるのは難しいです。これはベース jquery の一部ではないためです。おそらく、あなたまたはあなたが一緒に働いている誰かが .load() を拡張したのでしょう。

于 2013-03-14T21:52:36.763 に答える
0

あなたはおそらく次のようなことをしたいと思うでしょう:

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
};

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select").on("change", function(event){
          $('#OOM_vs_Logged').load(
                "http://jsbin.com/ujabuf/1/edit",
                $.fn.reportZebraStriper()
          );
    });

});

実例はhttp://jsbin.com/ujabuf/1/editで見ることができます

于 2013-03-13T19:33:15.780 に答える
0

してみてください 

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
}

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select")
      .on("change", function(event){
          $('#OOM_vs_Logged').loadUrl(/*ajax method call in the global site.js file*/).then(reportZebraStriper);
      });
});

loadUrl 関数は次のようになります。

function loadUrl() {
    return $.ajax({
                      url: // whatever
    });
}

[編集] 通常、上記で更新された jsfiddle でこれらをチェックします

于 2013-03-13T19:29:38.453 に答える
0

try $("#oom_display_options") you should not need to add any sort of container to your selector when selecting by an id

于 2013-03-13T19:12:51.380 に答える