Question

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

我的问题是无法在动态生成的复选框上使用jQuery选择器。当复选框被更改时，没有任何反应 - 没有控制台日志或任何东西。

我没有重新考虑我的代码以避免重复/等等，所以请原谅这个邋iness：

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中。它是否正确？

Answer 1

使用.on()

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

$(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 );

Answer 2

而不是将您的事件绑定在$（文档）.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脚本向页面添加内容之后。因此，您可以将事件正确绑定到新添加的元素

jQuery在动态（PHP）创建的复选框上

2 个答案: