不能 select 在 jQuery 中动态附加的按钮

Question

我在jQuery中使用getJSON函数，并在DOM中以按钮的形式附加检索结果。但是我不能在附加的 DOM.

上使用选择器

这是我的脚本：

$.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
            if (data.indexOf("noDiary") > -1) {
                document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
            } else {
                var appendedText = '';
                $.each(data, function(){
                    var diaryID = this.diary_id;
                    var dateAdded = this.date;
                    appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
                })
                document.getElementById("diaryList").innerHTML = appendedText;
            }
        })

这是我用来选择的：

$(':button.diaries').click(function(){});

但它似乎不起作用。然而，当我在 HTML 正文中放置一个具有相同 class 的虚拟按钮时，它被完美地选中了。你们能给我一些建议吗？

Answer 1

检查您的代码是否已准备好文档

 $(document).ready(function(){ //your code here });

并使用

$('button.diaries').on(click , function(){})

而不是 .click

Answer 2

@Kelvin Aliyanto ....所以解决方案是这样的

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(function(){
        $.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
            if (data.indexOf("noDiary") > -1) {
                document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
            } else {
                var appendedText = '';
                $.each(data, function(){
                    var diaryID = this.diary_id;
                    var dateAdded = this.date;
                    appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
                })
                document.getElementById("diaryList").innerHTML = appendedText;
            }
        });


        $('div').on('click', '.diaries', function(event){
        alert("Hi");
        }) ;

});
</script>   

<div id="diaryList"></div>

不能 select 在 jQuery 中动态附加的按钮

Cannot select a button which appended dynamically in jQuery

javascript

jquery

jquery-selectors