javascript - 如何将事件处理程序添加到 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>

我尝试首先使用按钮而不是 anchor 标记，但我不知道如何将事件处理程序添加到动态创建的按钮，这些按钮将通过 AJAX 将请求发布到一些具有正确 id 作为值和值的 php 脚本文本区域。所以我使用了 anchor 标签，我能够发送 id，但是我不能发送 textarea 的值，因为我不知道如何引用它，即使我引用了它，它也将是 NULL，因为它的值在最开始设置为 anchor 标记，我想在文本区域中输入文本。

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