更改事件上的动态输入复选框

Question

我有 table 个复选框，它们正在通过 AJAX 分页。我正在尝试为这些被点击的新复选框之一创建点击事件。单击它时，我将需要根据该标准的 ID 更新一组 ID。

问题是，在 AJAX 调用后填充输入时，我不知道如何让我的 Javascript 响应。如果我在视图中加载输入，点击事件工作正常，但如果它通过 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>'));
    }
}

标准在视图中正确加载，我只是无法获得单击复选框的正确事件处理程序。非常感谢任何帮助。

Answer 1

从点击事件中删除 tr td 应该可以。

$('#pl-standard-listing').on('click', 'input[type=checkbox]', function() {
console.log("Clicked.");
console.log(this);
});

更改事件上的动态输入复选框

Dynamic Input Checkbox on change event

html

javascript

ajax

jquery

event-binding