Невозможно выбрать кнопку, которая динамически добавляется в jQuery

69
6

Я использую функцию getJSON в jQuery и добавляю полученный результат в форме кнопки в 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, она выбирается отлично. Можете ли вы, ребята, дать мне какое-нибудь предложение?

спросил(а) 2015-01-02T19:02:00+03:00 5 лет, 8 месяцев назад
1
Решение
80

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

ответил(а) 2015-01-02T20:04:00+03:00 5 лет, 8 месяцев назад
40

проверить свой код после подготовки документа

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

и использовать


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

вместо .click

ответил(а) 2015-01-02T19:06:00+03:00 5 лет, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема