Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do i get this jquery event delegation to behave in ie7 as it does in chrome?
    text
    copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>Demo html</p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;input id='master' type='checkbox'/&gt; &lt;/li&gt; &lt;li&gt; &lt;input class='minion' type='checkbox'&gt; &lt;/li&gt; &lt;li&gt; &lt;input class='minion' type='checkbox'&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="log" style='background:#eee;cursor:pointer;'&gt; &lt;/div&gt; </code></pre> <p>Demo javascript, jquery 1.7</p> <pre><code>$(function() { $("#log").click(function() { $(this).html(''); }); $(".minion").change(function() { var msg = $(this).is(":checked") ? "checked" : "unchecked"; $("#log").append("&lt;p&gt; " + msg + " : " + new Date() + "&lt;/p&gt;"); }); $("#master").change(function() { var toBeChanged = $(this).is(":checked") ? $(".minion").not(":checked") : $(".minion").filter(":checked"); toBeChanged.click(); }); }); </code></pre> <p>And obligatory jsfiddle: <a href="http://jsfiddle.net/hzcAF/" rel="nofollow">http://jsfiddle.net/hzcAF/</a></p> <p>I'm pretty stumped. ​</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload