了解 jQuery .change 事件

Question

我在理解 jQuery().change() 行为时遇到了一些问题。

HTML 基本上是很多输入元素 - 复选框（每个 ID 为 id^='o99-post-visible-XXX' - 它们是纯 CSS 图像作为复选框，但这无关紧要），我还有另一个复选框 ("#o99-check-all") 用于“检查all”和一个文本输入字段 ('#o99-post-visible-ids')，用于接收所选框的 ID。

jQuery代码如下：

 jQuery(document).ready(function() {
    jQuery("#o99-check-all").change(function () {
       jQuery("input:checkbox[id^='o99-post-visible-']").prop('checked', jQuery(this).prop("checked")).trigger('change');

    });

        var checkboxes = jQuery("input.o99-cbvu-posts-checkbox:checkbox");
        checkboxes.on('change', function() {
            // get IDS from all selected checkboxes and make a comma separated string
            var ids = checkboxes.filter(':checked').map(function() {
                return this.value;
            }).get().join(',');
            // put IDS inside a text input field
            jQuery('#o99-post-visible-ids').val(ids);
            // console.log(ids);
        });
    });

现在，或多或少现在一切正常，但这不是问题。

起初，第一段代码是：

  jQuery("#o99-check-all").change(function () {
           // without .trigger('change') chained
           jQuery("input:checkbox[id^='o99-post-visible-']").prop('checked', jQuery(this).prop("checked"));

        });

它没有工作（为什么？？） - 表示按预期选择了框，但 '#o99-post-visible-ids' 输入字段没有收到 ID - 直到我链接了一个 .trigger('change') 事件 - 突然它工作正常。

我的困惑在于以下（对于我对 jQuery 内部工作的一点了解，这可能是违反直觉的）

在链添加 .trigger('change') 之后 - 这难道不是一个无限循环，其中 chain() 事件在 change() 的侦听器内触发？如果不是，为什么？

为什么代码现在可以正常运行而以前不能正常运行？因为再次，据我了解，即使不是由用户直接点击触发，也会发生变化。为什么需要手动触发？

Answer 1

我不确定我明白你的意思。现在发生的事情是，每当你更改all复选框时，其他复选框都会像all一样被选中/取消选中，然后触发change事件.

因为您为change 添加了一个侦听器，所以该函数将触发。 IE。这个函数将运行：

function() {
    // get IDS from all selected checkboxes and make a comma separated string
    var ids = checkboxes.filter(':checked').map(function() {
                  return this.value;
              }).get().join(',');
    // put IDS inside a text input field
    jQuery('#o99-post-visible-ids').val(ids);
    // console.log(ids);
}

没有您的.trigger("change")（或简称.change()），您只能更改输入的属性。所以对象确实发生了变化，但这并不意味着触发了change 事件。听起来确实违反直觉，但事件仅由用户操作或您显式调用事件触发 - 没有其他方式触发事件。

Answer 2

这是因为您在函数中编写了 jQuery('#o99-post-visible-ids').val(ids);，该函数仅在输入上完成更改事件时发生，直接通过 .prop 分配 prop 不会触发 change 事件，因此结果处理程序不会运行

Answer 3

如果我理解正确的话……

...因为您要为每个复选框提供相同的 ID？如果您希望将其应用于多个元素，最好使用类选择器。

jQuery(".o99-check-all").change(function () {
// without .trigger('change') chained
jQuery(".o99-check-all").prop('checked', jQuery(this).prop("checked"));
});

查看链接 https://api.jquery.com/change/