javascript - 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 のロード方法を投稿できますか。

とはいえ、正常に動作するように見えるサンプル コードを次に示します。 ここでフィドル

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