了解 jQuery .change 事件

Question

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

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

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

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

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

Answer 1

现在如果我理解正确的话...

...因为您为每个复选框提供了相同的 ID？如果您希望将它应用于多个元素，最好的做法是 使用 class 选择器 .

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

见link https://api.jquery.com/change/

Answer 2

因为你在一个函数中写了 jQuery('#o99-post-visible-ids').val(ids);，这个函数只有在输入上完成 change 事件时才会发生，直接通过 .prop 分配 prop 不会触发 change 事件并且所以结果处理程序不会运行

Answer 3

我不确定我明白你的意思。现在发生的事情是，每当您更改 all 复选框时，其他复选框将 checked/unchecked 与 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 事件。它确实听起来 counter-intuitive，但事件仅由用户操作触发，或者如果您显式调用事件 - 不会以其他方式触发事件。

了解 jQuery .change 事件

Understanding jQuery .change event

javascript

jquery

events

onchange