Question

我有一个简单的代码。每次我点击“开始”按钮，都会创建3个带有唯一ID和值的新按钮并附加到我的div。

对于每个新按钮，如果我点击它，它会提醒按钮内的值。我的问题是，如果我单击“开始”按钮4次，那么创建了12个新按钮（没关系），但每当我点击任何新创建的按钮时，它会多次警报（不是我预期的1次）

我想问题是，每当我点击“开始”按钮时，都会在按钮上附加一个新的处理程序。如何避免这个问题。我已经google了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>

Answer 1

如果您的按钮保留在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++;
     }               
});

否则，正如您在问题中已经猜到的那样，您可以在现有按钮中添加其他监听器，因为您可以遍历所有按钮。

Answer 2

每次点击开始时，您也会为页面上已有的按钮创建事件处理程序，这意味着它们会连接多个处理程序，您点击开始按钮的次数就越多。

只需在文档准备就绪时添加以下处理程序（不是点击），如果它具有let resultsController : NSFetchedResultsController<NSDictionary>!之类的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++; } }); });按钮。无需动态添加新处理程序。

Answer 3

你的猜测是正确的。您多次添加处理程序。这是修复。

<!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>

多个处理程序附加到同一HTML元素

3 个答案: