Аякса загружен содержание событие вызвало несколько раз

Question

У меня есть DIV, в котором у меня есть пункт и кнопка, как это:

<div id="my_div"> 
    <p>This is a paragraph</p> 
    <button class="my_btn">Click here!</a> 
</div> 

Содержание внутри моего DIV загружается с помощью Ajax. Теперь допустим, что у меня есть что-то вроде этого в заголовке моей страницы, чтобы проверить кнопку:

$(function(){ 

    $(document).on('click', '.my_btn', function(){ 

     alert('my button works!');   

    }); 

}); 

Проблема у меня в том, что каждый раз, когда содержимое загружается в моем DIV с моим пунктом и моей кнопки, когда я нажимаю на свою кнопку, я получаю свое предупреждение («моя кнопка работает!») такое же количество времени, то есть, если содержимое загружается 100 раз, я получаю свое предупреждение 100 раз, любая идея, как я могу исправить эту проблему и почему это происходит, пожалуйста?

Спасибо

Answer 1

Это немного рубить, но должен работать

$(function(){ 

    $(document) 
    .off() 
    .on('click', '.my_btn', function(){ 

    alert('my button works!');   

    }); 

}); 

Answer 2

вы можете отправить вызов Ajax и как вы загружаете DIV для более подробного объяснения.

Это, пожалуйста, пример кода, который, кажется, работает нормально. fiddle here

<div id='data' style='display:none;'> 
    <p>This is a paragraph</p> 
    <button class="my_btn">Click here!</a></div> 
<div id='target'></div> 
<button class='load'>this load works</button> 

$(document).ready(function() { 
    $(document).on('click', '.my_btn', function(){ 
     alert('my button works!');   
    });  
    $('.load').click(function() { 
     $('#target').html($('#data').html()); 
    });  
});