Несколько обработчиков, прикрепленных к одному и тому же элементу HTML

У меня есть простой код. Каждый раз, когда я нажимаю кнопку «Пуск», три новых кнопки с уникальными идентификаторами и значениями создаются и добавляются к моему div.Несколько обработчиков, прикрепленных к одному и тому же элементу HTML

Для каждой новой кнопки, если я нажимаю на нее, она предупреждает о значении внутри кнопки. Моя проблема заключается в том, что если я нажимаю кнопку «Пуск» 4 раза, поэтому создается 12 новых кнопок (это нормально), но всякий раз, когда я нажимаю на новую созданную кнопку, она предупреждает несколько раз (не один раз, как я ожидаю) ,

Я думаю, проблема в том, что каждый раз, когда я нажимаю кнопку «Пуск», к кнопке прикрепляется новый обработчик. Как избежать этой проблемы. Я googled для 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>

источник

2016-07-03 Khoi Boo

Ваша догадка правильная. Вы добавили обработчики несколько раз. Это исправление.

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

источник

2016-07-03 18:06:40

Если кнопки остаются в 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++; 
    }    
});

Иначе, как вы уже догадались в своем вопросе, добавив дополнительных слушателей к существующим кнопкам, так как вы проходите через все из них.

источник

2016-07-03 17:59:04 lexith

При каждом нажатии на запуск вы создаете обработчики событий также для кнопок, которые уже находятся на странице, что означает, что они прикрепляют к ним несколько обработчиков, тем больше вы нажимаете кнопку запуска.

Просто добавьте следующий обработчик на документе готового (не по щелчку), и она будет захватить щелчок любой будущей кнопки, если он имеет идентификатор, как 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* кнопок. Нет необходимости динамически добавлять новые обработчики.

источник

2016-07-03 18:03:10 trincot

Несколько обработчиков, прикрепленных к одному и тому же элементу HTML

ответ

Смежные вопросы