1

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

我的问题是无法在动态生成的复选框上使用 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 中。它是否正确？

4

2 回答 2

2

使用.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 );
于 2013-10-21T15:21:22.013 回答
0

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

于 2013-10-21T15:25:28.973 回答