javascript - 如何让 jQuery 事件委托(delegate)在 IE7 中像在 Chrome 中一样运行？

Question

我有一堆复选框，然后这个“主”复选框将取消选中，或者如果选中则将其全部选中。这是非常常见的 UI 想法，如果您使用 GMail，或者计算机，您可能已经见过它。

每个复选框都有一个在您更改它时触发的事件。单击主复选框将导致它仅在需要更改的复选框上触发。

在 Chrome 中它可以工作，在 IE7 中则不行。也就是说，在 Chrome 中，单击主复选框会将点击聚合到需要单击的其他框，并且将触发它们的“onChange”事件。在 IE7 中，点击似乎会聚合，但 onChange 事件不会触发。

演示 html

<ul>
  <li>
    <input id='master' type='checkbox'/>
  </li>
  <li>
        <input class='minion' type='checkbox'>
  </li>
  <li>
        <input class='minion' type='checkbox'>
  </li>
</ul>
<div id="log" style='background:#eee;cursor:pointer;'>
</div>

演示 JavaScript、jquery 1.7

$(function() {
    $("#log").click(function() {
        $(this).html('');
    });


    $(".minion").change(function() {
        var msg = $(this).is(":checked") ? "checked" : "unchecked";
        $("#log").append("<p> " + msg + " : " + new Date() + "</p>");
    });

    $("#master").change(function() {
        var toBeChanged = $(this).is(":checked")
            ? $(".minion").not(":checked")
            : $(".minion").filter(":checked");

        toBeChanged.click();
    });
});

和强制性的jsfiddle:http://jsfiddle.net/hzcAF/

我很困惑。 ​

Answer 1

看来您需要手动触发 change 事件。这应该适用于 IE 和 Chrome:

$("#master").click(function() {
    $(".minion").prop("checked", this.checked).change();
});

( Demo at jsfiddle.net )