如何选择已附加的复选框答案

【问题标题】：How to select a checkbox which been appened如何选择已附加的复选框
【发布时间】：2016-04-13 06:26:28
【问题描述】：

使用 JQuery，我在其中一个 td 包含一个复选框的地方附加了一个 tr。它很好地出现在屏幕上。但是我想选择其中一个复选框并在点击时触发一个功能。由于某种原因，选择器看不到附加的复选框。我认为这是因为复选框实际上不在 HTML 源代码中。

那么，问题：我该怎么做才能选中此复选框？

$.each(categories, function (i, product) {
    $(".table_products").append('<tr class="empty"><td >' + product.product_name + '</td><td>' + product.price + '</td><td> <input type="checkbox" value="cat_id"></td></tr>');

    $("tr").addClass("cat_products");
});

$("td input:checkbox").on('click', function () {
    alert('line 41');
});

【问题讨论】：

只要您在 $.each 循环之后运行 .on()，该代码就应该可以工作。
为我工作：jsfiddle.net/barmar/mybqnuy5/1
假设你的桌子是.table_products 你能试试这样的吗？ $('.table_products').on('click', 'td input:checkbox', function(){...。这会将事件侦听器附加到表中，并将自动应用于新附加的复选框
如果您在页面加载时尝试绑定处理程序，请参阅stackoverflow.com/questions/203198/…
@David784 该死的，它成功了！我猜大卫的回答与巴尔玛基本相同。我是 JS 新手，我不得不承认我不明白 为什么 是有效的。

标签： jquery html checkbox

【解决方案1】：

我必须简要说明事件的运作方式。在 JavaScript 中，事件“冒泡”。这意味着如果您单击一个跨度，该跨度将首先获得点击事件。然后点击事件冒泡到跨度的父级（假设是一个 div）。然后事件从那里冒泡到链中的下一个元素。以此类推，直到到达 DOM 的顶部元素。

jQuery 使您能够将事件侦听器附加到文档中的任何级别。它还使您能够过滤。所以当我们这样做时：

$('.table_products').on('click', 'td input:checkbox', function(){...});

我们将事件侦听器附加到.table_products 元素。这个元素永远不会改变。它总是在那里。我们添加的是过滤器部分，或'td input:checkbox'。这部分告诉 jQuery，“当您在表格中获得点击事件时，查看该点击事件是否发生在与此过滤器匹配的子元素上。”

这允许侦听器拾取新添加的元素。希望这个解释有所帮助。您可以获取更多信息here

【讨论】：