[英]Multiple handlers attached to the same HTML element
我有一個簡單的代碼。 每次單擊“開始”按鈕,都會創建3個具有唯一ID和值的新按鈕,並將其附加到我的div中。
對於每個新按鈕,如果我單擊它,它將提醒按鈕內的值。 我的問題是,如果我單擊“開始”按鈕4次,那么創建了12個新按鈕(可以),但是每當我單擊任何新創建的按鈕時,它都會發出多次警報(不是我期望的1次) 。
我想問題是,每當我單擊按鈕“開始”時,都會在該按鈕上附加一個新的處理程序。 如何避免這個問題。 我已經用谷歌搜索jQuery off(),但是並沒有太大幫助。 非常感謝任何幫助。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
var count =1;
$( document ).ready(function() {
$('#start').on('click', function(e) {
var i;
for (i=0;i< 3;i++)
{
$('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>').appendTo('#mydiv');
count++;
}
for(i=1;i<= count;i++)
{
$(document).on("click", '#Button' + i , function(){
alert ( $(this).attr('value') );
});
}
});
});
</script>
</head>
<body>
<h1>Test dynamically created button</h1>
<div id = "mydiv">
<button id ="start">START</button>
</div>
</body>
</html>
如果您的按鈕停留在DOM中(如當前所示),為什么不將EventListener直接添加到新添加的按鈕上,如下所示:
$('#start').on('click', function(e) {
var i;
for (i=0;i< 3;i++) {
var myNewButton = $('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>');
myNewButton.appendTo('#mydiv');
myNewButton.on("click", function() {
alert ( $(this).attr('value') );
});
count++;
}
});
否則,正如您已經在問題中所猜到的那樣,您將添加其他偵聽器到現有按鈕中,因為您要遍歷所有這些按鈕。
每次單擊“開始”時,您還為頁面上已經存在的按鈕創建事件處理程序,這意味着當您單擊“開始”按鈕時,它們會附加幾個處理程序。
只需在准備就緒的文檔上添加以下處理程序(而不是單擊),如果ID為Button*
,它將捕獲任何將來的按鈕單擊:
$(document).on('click', '[id^=Button]', function () {
alert ($(this).attr('value') );
});
從開始按鈕的處理程序中刪除此類單擊處理程序的創建。
因此,代碼變為:
$(document).ready(function() {
var count = 0;
$(document).on('click', '[id^=Button]', function () {
alert ($(this).attr('value') );
});
$('#start').on('click', function(e) {
var i;
for (i=0;i<3;i++) {
$('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>').appendTo('#mydiv');
count++;
}
});
});
這樣,您只有兩個處理程序:一個用於“開始”按鈕,一個用於所有其他Button*
按鈕。 無需動態添加新的處理程序。
你的猜測是正確的。 您多次添加了處理程序。 這是修復的。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var count = 1; //no need to make it global
$('#start').on('click', function(e) {
var i;
for (i=0;i< 3;i++)
{
$('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>')
.click(function(){//add handler when button created... and never more
alert (this.value);//or $(this).val()
})
.appendTo('#mydiv');
count++;
}
/* here you add handlers more and more times
for(i=1;i<= count;i++)
{
$(document).on("click", '#Button' + i , function(){
alert ( $(this).attr('value') );
});
}
*/
});
});
</script>
</head>
<body>
<h1>Test dynamically created button</h1>
<div id = "mydiv">
<button id ="start">START</button>
</div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.