Question

我对jQuery().change()行为有一些了解。

HTML基本上是很多输入元素 - 复选框（每个都有ID为id^='o99-post-visible-XXX' - 并且它们是纯CSS图像作为复选框，但这是无关紧要的）我有另一个复选框（"#o99-check-all" ）＆＃34;检查所有＆＃34;和一个文本输入字段（'#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添加了一个侦听器，所以该函数将会触发。即这个函数将运行：

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"));
});

请参阅链接 Read "Performance Surprises and Assumptions : GROUP BY vs. DISTINCT" by Aaron Bertrand

理解jQuery .change事件

3 个答案: