我认为这是一个相对简单的问题。为了测试的目的,我把它做得很简单,以便找到问题所在。
我有一个 jQuery 脚本,它与 AJAX 一起工作,以返回复选框旁边的一些结果,如下所示:
$.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 识别动态创建的元素?
最佳答案
尝试在success: function() {}内的$.each(data, function() {})后面绑定(bind)点击事件
您在 DOM 中使用具有相同 ID 的多个元素:元素 ID 在整个文档中应该是唯一的。
使用类来代替
您的代码将如下所示:
$.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" class="emailCheckboxSelect" />'),
$('<td>').text(val)).appendTo('#customerEmails');
});
$('.emailCheckboxSelect').click(function(e) {
alert('clicked');
});
}
}
});
关于javascript - AJAX/jQuery 生成的输入无法被其他 jQuery 脚本识别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48669591/