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

這有點hack，但應該可以

 $(function(){

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

    alert('my button works!');        

  });

});

Answer 2

您可以發布ajax調用以及如何加載div以獲得更詳細的說明。

就是說，這里有一些示例代碼似乎運行良好。 在這里擺弄

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