AJAX加載的內容事件觸發多次

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()); 
    });  
});