將事件處理程序添加到動態添加的元素

以下示例頁面會根據foo對象附加三個<button>標記，並且在單擊時，我期望它們輸出foo中的值。例如，點擊ID爲btn1的按鈕，我希望得到輸出Title:baz, ID:7198。但是，每個按鈕按下輸出Title:whizbang, ID:7119。將事件處理程序添加到動態添加的元素

我相信罪魁禍首是在按鈕事件處理程序（$("#btn" + i).click(function()），但我不知道。我已經通過它並點擊了，無論按下哪個按鈕，i的值都是2。

我該如何完成我正在尋找的行爲？ jQuery不是必需的，但我碰巧使用的是。

<html> 
<head> 
<script type='text/javascript'> 
var foo = { 
    "foo": [ 
     { 
      "title":"bar", 
      "id":7826 
     }, 
     { 
      "title":"baz", 
      "id":7198 
     }, 
     { 
      "title":"whizbang", 
      "id":7119 
     } 
    ] 
}; 
</script> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
    for (i in foo.foo) { 
     $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
     $("#btn" + i).click(function() { 
      $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
     }); 
    } 
}); 

</script> 
</head> 
<body> 
    <div id='content' /> 
    <div id='result' /> 
</body> 
</html>

來源

2014-07-08 jdphenix

爲什麼不向他們添加一個類並編寫一個類選擇器的事件 –

您不應該使用in循環遍歷數組。使用forEach方法或循環的條件增量。 – SimpleJ

@SimpleJ感謝關於'forEach'的提示，它完全符合我的需求，如果你想寫一個簡單的答案，我會接受它 – jdphenix

fiddle showing this solution working

$(document).ready(function() { 
    for (var i = 0; i < foo.foo.length; i++) { 
     $("#content").append("<button type='button' class='btn' data-btnid='"+i+"'>" + foo.foo[i].title + "</button>"); 
    } 

    $("#content").on("click", ".btn", function() { 
     var btnid = $(this).attr("data-btnid"); 
     $("#result").append("<p>Title:" + foo.foo[btnid].title + ", ID:" + foo.foo[btnid].id + "</p>"); 
    }); 
});

像其他人說，你應該改變你的循環。除此之外，這些都是我所做的更改：

你所有的按鈕具有相同的行爲，所以給他們同樣的類，而不是一個ID
把按鈕的ID在自定義屬性（data-btnid）。自定義屬性以data-開頭。
對於實際獲取您想要的行爲，您必須動態綁定單擊事件。基本上你使用一個選擇器來獲得父母，在你的情況下它是$("#content")，並將一個點擊事件綁定到類btn的孩子。然後它訪問被點擊的自定義屬性data-btnid的按鈕以獲取數組中信息索引的id。

來源

2014-07-08 16:53:04 Shmoopy

也許這裏是需要保存的VaR值，我的每一次迭代，例如，在封閉：你通過在點擊論據功能（..）的包裝函數通過這種方式：

$(document).ready(function() { 
    for (i in foo.foo) { 
     $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
     $("#btn" + i).click((function(i){ 
      function() { 
       $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
      } 
     })(i)); 
    } 
});

來源

2014-07-08 16:49:23 weeklyTea

將事件處理程序添加到動態添加的元素

回答

相關問題