0

外部 API からデータを取得して、ダッシュボード ページに表示しています。これを行うには、次のように、データを処理した後に DOM 要素を生成します。

for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key })
      .appendTo($("#someDiv"))
      .click(function() {
          alert(key);
      });
      $("#"+key).html("<b>" + key + "</b>: $"+companies[key]+"<br>");
  }

ただし、新しく生成されたspan要素のいずれかをクリックすると、 の最後の値でアラートが表示されcompaniesます。たとえば、次のように宣言したとします。

var companies = {
    "Google": 3,
    "Apple": 4
};

span次に、Googleと Apple の両方をクリックすると、spanアラートが表示され4ます。私の望ましい行動は、Googlespanをクリックして警告すること3です。

4

3 に答える 3

3

これはどう：-

イベント デラグションを使用して、イベント ハンドラーをon()1 回だけアタッチします。(追加されたクラスを参照してくださいcompName)。を使用するだけidです。

委任されたイベント ハンドラーのリファレンスはこちらを参照してください。somediv が DOM に既に存在する場合は、そのまま使用できます$('#someDiv').on('click','.compName',function(){...

$(function(){
$(document).on('click','.compName',function(){ 
//.....
   alert(this.id);
//....
});
....
for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key, 'class':'compName' }).html("<b>" + key + "</b>: $"+companies[key]+"    
      <br>").html("<b>" + key + "</b>: $"+companies[key]+"<br>").
      .appendTo($("#someDiv"));

  }
//...
})
于 2013-05-11T18:43:01.880 に答える
1

ハンドラーが実際に実行keyされるまでにループが終了するため、クロージャーで値をキャプチャする必要があります。clickこれを試して：

.click((function() {
    return function () {
        alert(key);
    };
})());

または、それが次のように設定されているため、alertそのだけにすることもできます。id

.click(function () {
    alert(this.id);
});
于 2013-05-11T18:44:02.960 に答える
0

これは、関数を呼び出す前に変数キーが変更されるためです。外部コードによって変更されないようにするには、その周りにクロージャーが必要です。

for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key })
      .appendTo($("#someDiv"))
      .click((function(privatekey) {
          return function(){
              alert(privatekey);
              };
      })(key));
      $("#"+key).html("<b>" + key + "</b>: $"+companies[key]+"<br>");
  }
于 2013-05-11T18:43:20.507 に答える