jQueryの動的に作成されたボタンにイベントハンドラを追加する方法は？

Question

私は動的にHTMLを作成するために、AJAXを使用するが、私は、私は最初の代わりに、アンカータグのボタンを使用しようとしましたが、私は動的にボタンを作成するためにイベントハンドラを追加する方法を見つけ出すことができなかった問題

<script> 
    function page_loaded(){ 
     jQuery.ajax({ 
      method: "GET", 
      url: "get_data_dashboard.php", 
      success: function(data){ 
       var markers = JSON.parse(data); 
       for(var i = 0; i < markers.length; i++){ 
        var m = markers[i]; 
        var markerHTML = "<div class='marker'>" + 
         "<span id='naziv'>Naziv zahtjeva: " + m.naziv + "</span></br>" + 
         "<span id='ulica'>Ulica: " + m.ulica + "</span></br>" + 
         "<p id='opis'>Opis:</br>" + m.opis + "</p></br>" + 
         "<span id='email'>Email: " + m.email + "</span></br>" + 
         "<img id='slika' src='" + m.link_slike + "' />" + "</br>" + 
         "<textarea rows='5' cols='30' maxlength='500' id='t" + m.marker_id + "' placeholder='Komentar'>" + "</textarea></br>" 
         + "<div class='buttons'><a href='odobri_prijavu.php?id=" + m.marker_id + "'>Odobri</a>" + 
          "<a href='izbrisi_prijavu.php?id=" + m.marker_id + "'>Izbriši</a>" + "</div>" + 
         "</div><hr>"; 

        $('#content').append(markerHTML); 
       } 

      } 
     }) 



    } 
    $(document).ready(page_loaded()); 

</script> 

が発生しましたAJAXを介して、テキストエリアの値と値として適切なIDを持つPHPスクリプトにリクエストを送信します。だから私はアンカータグを使用して、私はIDを送信することができたが、私はそれを参照する方法を知らないので、私はテキストエリアの値を送信することはできませんでした、はじめてアンカータグに設定され、テキストエリアにテキストを入力したいと考えています。

Answer 1

<script> 
    function page_loaded(){ 
     jQuery.ajax({ 
      method: "GET", 
      url: "get_data_dashboard.php", 
      success: function(data){ 
       var markers = JSON.parse(data); 
       for(var i = 0; i < markers.length; i++){ 
        var m = markers[i]; 
        var markerHTML = "<div class='marker'>" + 
         "<span id='naziv'>Naziv zahtjeva: " + m.naziv + "</span></br>" + 
         "<span id='ulica'>Ulica: " + m.ulica + "</span></br>" + 
         "<p id='opis'>Opis:</br>" + m.opis + "</p></br>" + 
         "<span id='email'>Email: " + m.email + "</span></br>" + 
         "<img id='slika' src='" + m.link_slike + "' />" + "</br>" + 
         "<textarea rows='5' cols='30' maxlength='500' id='t" + m.marker_id + "' placeholder='Komentar'>" + "</textarea></br>" 
         + "<div class='buttons'><a href='odobri_prijavu.php?id=" + m.marker_id + "' onclick="clickHandler('"+m.marker_id+"')">Odobri</a>" + 
          "<a href='izbrisi_prijavu.php?id=" + m.marker_id + "'>Izbriši</a>" + "</div>" + 
         "</div><hr>"; 

        $('#content').append(markerHTML); 
       } 

      } 
     }) 



    } 
    $(document).ready(page_loaded()); 
    function clickHandler(id){ 
     $('#'+id) // selects the button 
     $('#t'+id) // selects the text area 
    } 
</script> 

Answer 2

個々の「要素」を聞く代わりに、特定の要素の親を実際に聞くことができます（on（）に別のパラメータを指定する必要があります）。一般的なパターンは「ボディ」を聴くことです（ボディは技術的にすべての親です）。しかし、非ダイナミックな親要素は機能します！ここに例があります：

//notice the second parameter supplied 
$("body").on("click", ".my-dynamic-element", function(e){ 
    //awesome code that makes the world a better place goes here 
    //this code triggers when .my-dynamic-element is clicked, wootz 
}); 

Answer 3

イベントの委任はあなたの友人です。

は、私が実際にイベント処理を行う任意のアクションを参照してください `tを、何かのように簡単な解決策は次のようになります。あなたはおそらくイベントの委任を使用したい

$(document).on('click', '.your-button-class', function(){ 
// do your thing 
});