2

サーバーは JSON を送信します。構造化データのリストが含まれています。このデータをテキストボックスのリストとして表示し、それぞれに独自のonClickイベントがあります。クリックすると、テキストボックスの値は構造化データにあるものに設定されます (これは一意の ID です。つまり、各テキストボックスはクリック時に ID を表示する必要があります)。

テキストボックスを最初にクリックすると、その値がサーバーからのデータの ID で正しく設定されます。しかし、他のテキスト ボックスをクリックすると、最初にクリックしたテキスト ボックスの ID が表示されます。

クロージャー var と の両方を試しまし$.proxy()たが、うまくいかないようです。の内容を確認しましたmyAttributeが、関数の反復ごとに変更され$.each()ます。ただし、click()イベントは「実行時」に評価されるようで、更新されません。

質問は次のとおりです。

  1. myProcessedAttribute最初のクリック時のデータではなく正しいデータが含まれるように、問題を修正するにはどうすればよいですか?
  2. ネストされた関数を 4 つ持つという私のアプローチは、ベスト プラクティスではないかもしれません。

コード：

$.ajax({
  [...]
  success: function (data) {
    [...]
    $.each(data.listOfData, function () {
      [...]
      var myAttribute = this.myCoolAttribute; // <-- closure
      jQuery('<p/>')
      [...]
      .click(function () {
        var myProcessedAttribute = process(myAttribute);
        [jquery ui dialog...]
        create: function () {
          // it always contains the same data
          // the data on first click, after that, it never changes.
          $("#myDialog").html(myProcessedAttribute);
        }
      });
    });
  }
});

編集:イベントを入れalert(myProcessedAttribute)ただけです。前者のイベントでは、アラートに正しいデータが表示されました。後者のイベントでは、アラートは最初のクリックでのみ表示されましたが、その後のクリックでは表示されませんでした!click()create

私の解決策: .dialog({...}) を呼び出すと、新しいダイアログが古いダイアログに置き換わると思いましたが、間違っていました。新しいダイアログを作成する前に古いダイアログを破棄することで問題を解決しました。

より良い解決策：以下の回答を参照してください。

4

1 に答える 1