8

$ .getJSON成功関数内で、最初に別の要素のクリックイベントをトリガーします。

$('#' + data[0].ID).trigger('click');

トリガーされたクリックイベントには、大量のデータをdivにロードするための独自の$.getJSONメソッドがあります。トリガーされたイベントの次の行：

$.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
}

最初は$.eachは何もしていないように見えましたが、トリガーされたイベントの直後にアラートを追加しました。アラートに応答した後、$。eachのコードはそれが何をすべきかを示しています。

クリックイベントがデータの読み込みを完了する前に$.eachが実行されていると思います。

setTimeoutは、クリックイベントがデータをロードするのに十分な時間一時停止しますが、任意の時間を設定したくありません。

setTimeout(function() { 
    $.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    }
}, 1000);

また、$。whenと$ .thenを試しましたが、役に立ちませんでした（ただし、$。eachが$ .then内で$.eachの前にアラートを追加すると、$。eachが機能するまでに遅延が発生します）。

$.when($('#' + data[0].ID).trigger('click')).then(function () {
    $.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    })
4

3 に答える 3

6

より明確にするために整理

.trigger()は jQuery オブジェクトを返すため、実行するオプションは拒否されます$.when() ... $.then()。

一方、.triggerHandler()は選択したオブジェクトを返すため、遅延トリックを実行できます。

コードは 3 つの関数で構成されており、以下に簡略化されています。コール パスは 1、2、3 であり、最も重要なリターン パスは 3、2、1 です。

(1) 最高レベル (JSON 成功) 関数には、次の行が含まれます。

function() {
    ...
    $.when($('#' + data[0].ID).triggerHandler('click')).done(function() {
        $.each(data[0].ListEntries, function (key, val) {
            ...
        });
    });
    ...
};

(2) (1) によってトリガーされるクリック ハンドラーは、次のようになります。

$("img.Button").on("click", function () {
    return GetModels(this.id);//here `return` passes on the jqXHR object, up the return path.
});

(3) そして、(1) が依存する JSON を含む最下位レベルの関数は、次の一般的な形式になります。

function GetModels(id) {
    ...
    var jqXHR = getJSON(function(){...});
    ...
    return jqXHR;//it is vital to retutn the jqXHR object arising from the json call.
}

ノート ：

  • リターン パスは、(1) のメソッドへの "promise" 引数として、(3) の呼び出し.when()から生じる jqXHR オブジェクトを渡します。.getJSON()したがって、(1)の連鎖.done()は、その引数として提供される関数を起動する前に、jqXHR が解決される (つまり、完了する) まで待機することを余儀なくされます。
  • クリック ハンドラーは、それがどのように呼び出されるかについて何も仮定しません。jqXHR オブジェクトを返すだけです。したがって、 で呼び出された.triggerHandler()場合、クリック ハンドラは、通常のクリック アクションに影響を与えることなく、追加の動作を追加できます。
  • GetModels()(1) から直接呼び出す方が簡単で、仲介者 (2) を省略できます。これは、GetModels()動作が独自に必要な場合は問題ありません。ただし、(1) トリガー クリック ハンドラー (2) に対する将来の変更に対応する必要がある場合は、上記のアプローチを採用する必要があります。
于 2012-05-19T07:07:15.783 に答える
6

これにはカスタム イベントを使用できます。$.eachイベントのリスナーに配置すると、$.getJSON成功ハンドラーがそのイベントをトリガーできます。

$('#x').click(function() {
    var _this = this;
    $.getJSON(url, data, function(data) {
        // do things to data...
        _this.trigger('data-loaded');
    });
});
$('#x').on('data-loaded', function() {
    $.each(...)
});
$('#x').click();

デモ: http://jsfiddle.net/ambiguous/FeYTB/

于 2012-05-19T06:12:07.727 に答える
0

試してみませんか

$('#' + data[0].ID).live('click', function (){
   $.each(data[0].ListEntries, function (key, val) {
            // your stuff here 
    });
});

したがって、$.eachクリックがトリガーされた後にのみ実行されます。

于 2012-05-19T05:46:58.753 に答える