无法计算另一个页面中选中的复选框 jquery

Question

我有多组复选框。我想计算一组特定的复选框。这些复选框有 class sub。有趣的是，它们是由另一个 php 页面的 ajax 调用获取的。所以计数器不工作了。

<script>
$("[id^=sub][type=checkbox]").change(function () {
    $('#count').text($("[id^=sub][type=checkbox]").length);
});
</script>

当我使用下面的脚本获取 html 页面本身的复选框时，它会计算第一组复选框！这些是单击以获取 sub 个复选框的复选框！

现在，我如何计算由 ajax 调用获取的具有 sub class 的特定复选框集？

<script>
$("input:checkbox").change(function () {
    $('#count').text($("input:checkbox:checked").length);
});
</script>

这是获取的复选框的结构：

<input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="">

我在 html 页面中这样显示计数：

<p id="count"></p>

Answer 1

当您将更改事件处理程序绑定到子复选框时，它们不存在，因此 jQuery 对象不代表任何元素。即$("[id^=sub][type=checkbox]")调用时不匹配任何元素

您有两个选择，在 ajax 调用创建复选框后绑定事件处理程序，或者使用事件委托。使用事件委托，您将处理程序绑定到祖先元素，但指定仅当与选择器匹配的元素发生更改时才调用它。您可以查看 jQuery .on() 函数文档以了解有关事件委托的更多信息。

它可以很简单：

$(document).on('change', '[id^=sub][type=checkbox]', function () {
    $('#count').text($('[id^=sub][type=checkbox]:checked').length);
});

但为了效率，您应该尝试使用比 document 元素更近的祖先。越近越好，但是必须是所有子checkbox的祖先，而且执行这段代码的时候必须存在

根据您为子复选框显示的 html，您还可以使用以下选择器：

$(document).on('change', ':checkbox.sub', function () {
    $('#count').text($(':checkbox.sub:checked').length);
});

Unable to count checked checkboxes from another page with jquery