簡體   English   中英

附加到同一HTML元素的多個處理程序

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM