jQuery on a dynamically (PHP) created checkbox

我有一个下拉列表，其中填充了数据库记录，以及一个按钮，用于通过对处理页面的 AJAX 调用来显示每条记录的信息。如果记录的"批准"数据库字段为 true，则该复选框将显示为选中，否则，则未选中。到目前为止，一切正常。

我的问题是无法在动态生成的复选框上使用 jQuery 选择器。更改复选框后，不会发生任何反应 - 没有控制台日志或任何内容。

我没有重构我的代码以避免重复/等，所以请原谅草率：

PHP（通过 AJAX 调用返回代码）：

if($approved) {
    echo '<p><strong>Approved: </strong>';
    echo '<input type="checkbox" id="checkbox_unapprove" checked>';
    echo '</p>';
} else {
    echo '<p><strong>Approved: </strong>';
    echo '<input type="checkbox" id="checkbox_approve">';
    echo '</p>';            
}

我的jQuery的一部分：

$('#checkbox_approve').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});

$('#checkbox_unapprove').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges1 option:selected').attr('id');
    alert(dropdown_id);
});

我认为 jQuery 无法访问 #checkbox_approve 或 #checkbox_unapprove，因为它们在页面加载时没有加载到 DOM 中。这是对的吗？

使用 .on（）

由于元素是动态添加的，因此您无法将事件直接绑定到它们。因此，您必须使用事件委派。

$(document).on('change','#checkbox_approve',function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});

语法

$( elements ).on( events, selector, data, handler );

而不是将事件绑定到 $（document）.ready（）中，而是将其全部放在标准函数上

function onDocumentLoad() {
$('#checkbox_approve').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});

$('#checkbox_unapprove').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges1 option:selected').attr('id');
    alert(dropdown_id);
});
}

因此，您可以在 $（document）.ready（）; 以及 AJAX 脚本向页面添加内容之后调用此函数。因此，您的事件将正确绑定到新添加的元素