了解jQuery .change事件

Question

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

HTML基本上是很多输入元素-复选框（每个ID为id^='o99-post-visible-XXX' ，并且它们都是纯CSS图像作为Checkboxes，但这无关紧要），而我还有另一个复选框（ "#o99-check-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'输入字段没有收到.trigger('change')直到我链接了一个.trigger('change')事件-突然运作良好。

我对以下内容感到困惑（对于我对jQuery内部作品的一点理解也许是违反直觉的）

在链中添加.trigger('change') -难道不是一个无穷循环，在change()的侦听器内部触发了chain()事件吗？ 如果不是，为什么呢？

为什么代码现在可以正常运行，而以前却无法正常运行？ 因为据我所知，即使不是直接由用户点击触发的，也存在变化。 为什么我需要手动触发它？

Answer 1

我不确定我理解你的意思。 现在发生的事情是，每当您更改所有复选框时，其他复选框将与all一样被选中/取消选中，然后触发change事件。

由于您添加了一个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);
}

如果没有.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/