我有一个通过 AJAX 进行分页的复选框表。我正在尝试为单击这些新复选框之一创建单击事件。单击它时,我需要根据该标准的 ID 更新 ID 数组。
问题是,当 AJAX 调用后填充输入时,我不知道如何让我的 Javascript 做出响应。如果我在 View 中加载输入,单击事件可以正常工作,但如果它通过 AJAX 返回,则无法识别。
我研究过几个类似的问题,包括:
- http://api.jquery.com/on/
- Event binding on dynamically created elements?
- Alert after checked input checkbox
我无法从上述任何内容中找到解决我的问题的方法。我无法确定这里缺少什么。
HTML
<table summary="Standard Listing Table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Code</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="pl-standard-listing">
<tr>
<td>
<input checked="" name="standards[]" type="checkbox" value="8343">
</td>
<td>K.CC.A.1</td>
<td>Count to 100 by ones and by tens.</td>
</tr>
</tbody>
</table>
点击事件上的 Jquery
$('#pl-standard-listing tr td').on('click', 'input[type=checkbox]', function() {
console.log("Clicked.");
console.log(this);
});
从 API 添加所有标准的输入
// Select table and whipe current standards that are listed
var table = document.getElementById('pl-standard-listing');
$('#pl-standard-listing tr').remove();
for(var iCount = 0; iCount < currentStandards.length; iCount++) {
// Check if the standard is in the list of included standards with this grade group
if(standardIds.indexOf(currentStandards[iCount].id) === -1) {
$('#pl-standard-listing').append($('<tr><td><input name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
} else {
$('#pl-standard-listing').append($('<tr><td><input checked name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
}
}
标准在 View 中正确加载,我只是无法正确获取事件处理程序来单击复选框。非常感谢任何和所有的帮助。
最佳答案
从点击事件中删除 tr
td
应该可以。
$('#pl-standard-listing').on('click', 'input[type=checkbox]', function() {
console.log("Clicked.");
console.log(this);
});
关于javascript - 更改事件的动态输入复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37424187/