如何在jQuery中动态创建的按钮中添加事件处理程序？

Question

我使用AJAX动态创建HTML，但遇到了问题

<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将请求发布到某些php脚本，且其ID和值为textarea。 因此，我使用了定位标记，并且能够发送id，但是由于我不知道如何引用它，所以无法发送textarea的值，即使引用了它，也将为NULL，因为其值在一开始就设置为anchor标签，我想在textarea中输入文本。

Answer 1

实际上，您可以侦听特定元素的父级，而不是侦听各个“元素”（您需要向on（）提供另一个参数）。 一种流行的模式是听“ body”（因为从技术上讲body是所有人的父级），但是任何非动态父级元素都可以使用！ 这是一个例子：

//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 2

活动委托是您的朋友。

我看不到实际执行事件处理的任何动作，但是一个简单的解决方案是：

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

Answer 3

<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>