【发布时间】:2018-07-18 02:02:02
【问题描述】:
我认为这是一个相对简单的问题。出于测试目的,我将其变得如此简单,以便定位问题。
我有一个与 AJAX 一起工作的 jQuery 脚本,可以在复选框旁边返回一些结果,如下所示:
$.ajax({
type:'GET',
url: '/customers/details/emails',
dataType:'json',
data: {
'customerID': $('select[name=payer_id]').val(),
'_token': $('input[name=_token]').val(),
},
success: function(data) {
$('.errorTitle').addClass('hidden');
$('.errorContent').addClass('hidden');
if ((data.errors)) {
setTimeout(function () {
$('#createOrigin').modal('show');
toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
}, 500);
if (data.errors.title) {
$('.errorTitle').removeClass('hidden');
$('.errorTitle').text(data.errors.title);
}
if (data.errors.content) {
$('.errorContent').removeClass('hidden');
$('.errorContent').text(data.errors.content);
}
} else {
$.each(data, function(i,val) {
$('<tr>').append(
$('<td>').html('<input type="checkbox" id="emailCheckboxSelect">'),
$('<td>').text(val)).appendTo('#customerEmails');
});
}
}
});
正如您在结尾处看到的那样,对于每个结果,都会附加一个表格行,并带有一个 id 为“emailCheckboxSelect”的复选框。
现在我的问题是,这些显然是动态创建的元素,所以我相信这是这个脚本的问题(一个简单的假人只是为了定位问题)。这是应该工作的脚本:
$(function(){
$('#emailCheckboxSelect').click(function(){
alert('clicked');
});
});
这不适用于动态创建的元素。但是,我确实将<input type="checkbox" id="emailCheckboxSelect">Checkbox 直接添加到我的页面,这确实引发了警报。
那么我做错了什么,我需要做什么才能让 jQuery 识别动态创建的元素?
【问题讨论】:
-
$.each(data, function(i,val) { $('
').append( $(' ').html(''), $(' ').text(val)).appendTo('#customerEmails'); }); @GordonKushner - 它靠近第一个脚本中的 }else{ 之后的右下角Ids 需要是唯一的,所以你需要生成单独的 ids。 M. Gara 的答案是正确的,但您也需要更正 ID。
标签: javascript jquery html ajax checkbox