Jquery：なぜモーダルのボタンにアクセスできないのですか？

Question

jQuery ajaxを使用して、ブートストラップモーダルの内容全体を取得しています。ここで

$.get('/user/modal', { 
    id : datum.id 
}).done(function (data) { 
    $(data).modal('toggle'); 
    $('#my-btn').click(function() { 
     console.log('Button was clicked!'); 
    }); 
}); 

をAJAX呼び出しによって取得したとして、モーダルhtmlです：：ここにはJavaScriptです

<div class="modal fade temp-modal" tabindex="-1"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" id="my-btn">Click Me</button> 
      </div> 
     </div> 
    </div> 
</div> 

問題は、ボタンのクリックハンドラが動作しないということです。どうして？私が何をしても、私はそれを握ることができない！

Answer 1

dataが動的にロードされているとして、あなたはイベント委任する必要があります。これが行われなければならなぜ

$(document).on('click', '#my-btn', function() { 

を？

DOM要素を動的なあなたのケースとしてロードされ要求されたページが見つかりまし要素とAjax経由またはdocument.createElement()などを経由して、動的なあなたとDOMに追加された要素のためのイベント登録を行っていますイベントは、最も近い静的な親イベントまたは常に利用可能なdocumentまたはdocument.bodyイベントに委任する必要があります。

Answer 2

documentに含まれていないdataのボタンを検索する必要があると思います。

$.get('/user/modal', { 
    id : datum.id 
}).done(function (data) { 
    $(data).modal('toggle'); 
    $(data).find('#my-btn').click(function() { 
     console.log('Button was clicked!'); 
    }); 
}); 

Answer 3

私はあなたのコードを試してみたと私は結果

を取得するために終わった見てください、このfiddle

HTML

<div class="modal fade temp-modal" tabindex="-1"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" id="my-btn">Click Me</button> 
      </div> 
     </div> 
    </div> 
</div> 

jQueryを使って

JS 2.2.2

$.get('/').done(function (data) { 
    //$(data).modal('toggle'); 
    $('#my-btn').click(function() { 
     console.log('Button was clicked!'); 
    }); 
}); 

モーダルを切り替えたい行を非アクティブにすることに注意してください。しかしボタンクリックイベントが発生しました