1

JSONデータ (オブジェクトの配列)を返す ajax リクエストがあります。この配列を繰り返して、リンクのリストを生成します。onClickイベントを設定し、ajax レスポンスから params を使用して関数を呼び出したいと思います。

わかりにくいかもしれませんので、以下に例を示します。

function test(param1) {
    // ...
}

$.ajax({
    url: 'getSomeData.php',
    type: 'post',
    data: data,
    success: function(result){
        var result = JSON.parse(result);
        $div = $('<div />');

        for (i in result.someObject) {
            $div.append('<a href="#" id="linkID' + i + '">ajax link ' + i + '</a>');
            $('#linkID' + i).click(function(){
                test(result.someObject[i]); // <--- My question is here
                return false;
            });
        }
        $(document.body).append($div);
    }
});

私の関数testでは、反復配列の最後のオブジェクトを常に取得します。なぜこれが起こるのか、私はいくつかの考えを持っていますが、それを修正する方法がわかりません。

4

3 に答える 3

4

i のスコープに問題があります。以下のように、クロージャーを使用してそのスコープをクリック イベント ハンドラーに制限する場合は問題ありません。

(function(i) {
  $('#linkID' + i).click(function(){
    test(result.someObject[i]); // <--- My question is here
    return false;
  });
})(i);

これにより、 i が最後に設定された値ではなく、ハンドラーが作成されたときの値になることが保証されます。

于 2012-04-27T10:18:00.027 に答える
2

あなたの問題はスコープの 1 つです。変数iはスコープにバインドされていないため、イベント ハンドラーが呼び出されるまでに、常に最後の値が割り当てられます。

これを解決する最も簡単な方法 (jQuery を使用しているため) は、次のeventDataパラメーターを使用すること.click()です。

('#linkID' + i).click({ param1: result.someObject[i] }, test);

test次に、イベント データを読み取るように変更します。

function test(ev) {
    var param1 = ev.data.param1;
    // ...
}

jQuery は、提供されたすべての eventData をバインドし、イベント ハンドラーに渡されたイベント オブジェクトに自動的に追加します。

これにより、提供されたパラメーターのスコープを修正するために追加のクロージャーを作成する必要がなくなります。

http://api.jquery.com/bind/の「イベント データの受け渡し」というタイトルのセクションを参照してください。

于 2012-04-27T10:19:12.347 に答える
0

を使用して、コンテキスト（および変数）を渡すことができますjQuery.proxy()

簡単な例:

MyObject = function() {
  this.element = $('#element');
  this.some_var = 'It works!';

  this.element.click($.proxy(this.handleClick, this));
};

MyObject.prototype.handleClick = function() {
  console.log(this.some_var);
};

var m = new MyObject();

jQuery ドキュメントの例:

<script>
var me = {
  type: "zombie",
  test: function(event) {
    // Without proxy, `this` would refer to the event target
    // use event.target to reference that element.
    var element = event.target;
    $(element).css("background-color", "red");

    // With proxy, `this` refers to the me object encapsulating
    // this function.
    $("#log").append( "Hello " + this.type + "<br>" );
    $("#test").unbind("click", this.test);
  }
};

var you = {
  type: "person",
  test: function(event) {
    $("#log").append( this.type + " " );
  }
};

// execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );


// attach click handlers to #test
$("#test")
  // this === "zombie"; handler unbound after first click
  .click( $.proxy( me.test, me ) )
  // this === "person"
  .click( youClick )
  // this === "zombie"
  .click( $.proxy( you.test, me ) )
  // this === "<button> element"
  .click( you.test );
</script>
于 2012-04-27T10:17:27.130 に答える