將事件處理程序添加到動態添加的元素
[英]Adding event handlers to dynamically added elements
問題描述
以下示例頁面在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>
2 個解決方案
解決方案1
1 已采納 2014-07-08 16:53:04
$(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-開頭。 - 為了真正獲得所需的行為，必須動態綁定click事件。 本質上，您使用選擇器來獲取父級，在您的情況下是
$("#content")，並將click事件綁定到具有btn類的子級。 然后，它訪問單擊的自定義屬性data-btnid以獲取ID，該ID是數組中信息的索引。
解決方案2
0 2014-07-08 16:49:23
也許這里需要為每次迭代保存var i的值，例如，在閉包中：通過這種方式，將您作為參數傳遞給click（..）的函數放在wrapper函數中：
$(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));
}
});
如何將事件處理程序添加到Google日歷頁面上動態添加的元素？
[英]How can I add event handlers to dynamically added elements on a Google Calendar page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.