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因为它的值在一开始就设置为锚标记，我想在textarea中键入文本。

Answer 1

您可以实际收听特定元素的父级（您需要向on（）提供另一个参数），而不是倾听单个＆＃34;元素＆＃34;。流行的模式是倾听＆＃34; body＆＃34; （因为在所有技术上，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>

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

3 个答案: