javascript - AJAXリクエストから挿入されたHTMLにイベントをバインドする方法

Question

だから私はhtmlAJAXリクエストを介して注入しています：

Ajaxレスポンス

  <div id="my-element">HTML from AJAX request</div>

問題は、idを持つ要素が#my-elementAJAXリクエストから入ってくることですが、イベントもバインドする必要があります。例えば：

 $(document).ready(function() {
    $("#my-element").click(function() {
        alert("hit");
    });
 });

明らかに、上記のイベントは発生しません。これは、ページの準備ができたときに、HTMLがAJAXリクエストからまだ挿入されていないためです。これを修正するための最良の解決策は何ですか？

ありがとう。

score 7 · Accepted Answer

jQuery.on関数を使用してみてください：http： //api.jquery.com/on/

$(document).on('click', '#my-element', function () { ... });

そうすれば、動的に追加された要素でも機能します。

score 0 · Accepted Answer

AJAXリクエストを介したhtmlの挿入が完了した後にイベントを追加する
か、メソッド
を使用できますon

この例も参照してください

score 0 · Accepted Answer

メソッドを使用しonてライブにします。

$(function(){
    $("#my-element").on("click",function() {
        alert("hit");
    });
});

score -1 · Accepted Answer

htmlをDOMに挿入した後、ajax呼び出しの成功コールバックでバインディングを実行します。

4 に答える 4