title: IE 8 and below not triggering click on elements which have display: none; Any workaround?
body: <blockquote>
    <h3>The issue is with Internet Explorer 8 and below. Have found a decent working solution.</h3>
  </blockquote>
  
  <h3>Issue</h3>
  
  <p>Internet Explorer 8 and below is not triggering <code>click()</code> event set by jQuery (or even may be inline, not sure) on <code>&lt;input /&gt;</code> elements, which have CSS property, <code>display</code> set to <code>none</code>. It works in Internet Explorer 9, Mozilla Firefox, and Google Chrome. Weird. This is how the code is and is there any work-around for Internet Explorer 8 and below?</p>
  
  <h3>Context</h3>
  
  <p>The <code>input</code> to be clicked is given a style <code>display: none;</code>. And the function is given in the <code>click</code> event of the <code>input</code>. Since the whole stuff is inside the <code>label</code>, it triggers the <code>click</code> event on the <code>input</code> when the <code>label</code> clicked. You can take this as some kind of pretty selector, hiding the <code>input</code>.</p>
  
  <p>The <code>label</code> implicitly transfers the <code>click</code> event to the first <code>input</code> by default, and that is what I wanna use it here. I don't want the users to see the ugly <code>input</code> here. Expected browser behaviour, but not working.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;label&gt;
              &lt;input type="button" value="Button 1" /&gt;
              Hello! This is a list item #1.
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label&gt;
              &lt;input type="button" value="Button 2" /&gt;
              Hello! This is a list item #2.
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label&gt;
              &lt;input type="button" value="Button 3" /&gt;
              Hello! This is a list item #3.
          &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;​
  </code></pre>
  
  <h3>The Exact CSS which caused the Issue</h3>
  
  <pre><code>ul li,
  ul li label {display: block; padding: 5px; cursor: pointer;}
  ul li label input {display: none;}
  ul li {border-bottom: 1px solid #ccc;}
  ul li:hover {background-color: #eee;}​
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>$(document).ready(function(){
      $("input").click(function(){
          alert("Hey you! " + $(this).attr("value"));
      });
  });​
  </code></pre>
  
  <h3>Fiddle: <a href="http://jsfiddle.net/qSYuP/">http://jsfiddle.net/qSYuP/</a></h3>
  
  <hr>
  
  <h3>Update #1: Tried giving <code>for</code> attribute:</h3>
  
  <pre><code>&lt;label for="btn1"&gt;
      &lt;input type="button" value="Button 1" id="btn1" /&gt;
  </code></pre>
  
  <p>Still doesn't work!</p>
  
  <hr>
  
  <h3>Update #2: Tried CSS <code>visibility: hidden;</code>:</h3>
  
  <pre><code>ul li label input {visibility: hidden;}
  </code></pre>
  
  <p>Breaks layout. But, still doesn't work!</p>
  
  <hr>
  
  <h3>Update #3: Tried CSS <code>position: absolute;</code>:</h3>
  
  <pre><code>ul li label {overflow: hidden;}
  ul li label input {position: absolute; left: -99em;}
  </code></pre>
  
  <p><strong>Works!</strong> I am not in a position to use <code>overflow: hidden;</code>, seriously caught!</p>
  
  <hr>
  
  <h3>Update #4: Manually triggering the <code>click()</code> function:</h3>
  
  <pre><code>$(document).ready(function(){
      $("input").click(function(){
          console.log("Hey you! " + $(this).attr("value"));
      });
      $("label").click(function(){
          $(this).find("input").click();
      });
  });
  </code></pre>
  
  <p>Well, IE 8 goes out of stack after printing <code>LOG: Hey you! Button 3</code> for <strong>1209</strong> times!</p>
  
  <pre><code>LOG: Hey you! Button 3 
  LOG: Hey you! Button 3 
  LOG: Hey you! Button 3 
  LOG: Hey you! Button 3 
  LOG: Hey you! Button 3 
  SCRIPT28: Out of stack space 
  </code></pre>
  
  <p><strong>Works Infinitely!</strong> Should be an issue with my script!</p>
  
  <hr>
  
  <h3>Solution: Kind of crappy fix, but did the trick!</h3>
  
  <p>Since it is because IE 8, which supports <code>opacity</code>, I had to use <code>display: inline-block;</code> with <code>opacity: 0;</code>.</p>
  
  <pre><code>ul li label input {
      opacity: 0;
      width: 0px;
      height: 0px;
      display: inline-block;
      padding: 0;
      margin: 0;
      border: 0;
  }
  </code></pre>
  
  <p>Now the <code>input</code>'s box is hidden, literally. This fix is only for IE 8!</p>
  
  <p>Had to fix using the <strong>IE 8 and below Hack</strong>:</p>
  
  <pre><code>ul li label input {
      opacity: 0\9;
      width: 0px\9;
      height: 0px\9;
      display: inline-block\9;
      padding: 0\9;
      margin: 0\9;
      border: 0\9;
  }
  </code></pre>
  
  <h3>Fiddle: <a href="http://jsfiddle.net/VSQbD/">http://jsfiddle.net/VSQbD/</a></h3>