javascript - 了解 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 事件。这听起来确实违反直觉，但事件仅由用户操作触发，或者如果您显式调用事件 - 不会以其他方式触发事件。