CODEWITHSUNDEEP
javascriptjquerycross-browserinternet-explorer-7jquery-events
Conrad.Dean
Conrad.Dean

Reputation: 4421

How do I get this jQuery event delegation to behave in IE7 as it does in Chrome?

I have a bunch of checkboxes, and then this "master" checkbox that will uncheck, or check them all if it is checked. Pretty common UI idea, you've probably seen it if you use GMail, or, you know, computers.

Each checkbox has an event that fires when you change it. Clicking the master checkbox will cause it to be fired on only the checkboxes that need to be changed.

In Chrome it works, in IE7 it doesn't. That is, in Chrome clicking the master checkbox will aggregate clicks to the other boxes that need to be clicked, and their "onChange" events will fire. In IE7 the clicks seem to aggregate, but the onChange events aren't firing.

Demo 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>

Demo 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();
    });
});

And obligatory jsfiddle: http://jsfiddle.net/hzcAF/

I'm pretty stumped. ​

Upvotes: 0

Views: 168

Answers (2)

Bergi
Bergi

Reputation: 664579

Seems like you will need to fire the change event manually, then. This should work both in IE and Chrome:

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

(Demo at jsfiddle.net)

Upvotes: 2

Shmiddty
Shmiddty

Reputation: 13967

Here's a good starting point:

http://jsfiddle.net/7qn63/5/

You'll probably want to be a bit more selective with the forced change() call.

Upvotes: 1

Related Questions