IE 8 and below not triggering click on elements which have display: none; Any workaround?
css, input, internet-explorer-8, jquery
Solution
I think this is pretty straightforward. You just have to use click handlers on visible items. If you want a click on the `<label>` or the `<li>` to work when the `<input>` object is hidden and you want it to work in all browsers, then you just need to put a click handler on either the `<label>` or the `<li>` because that is a visible object that will receive the click when the `<input>` is hidden.
Problem
The issue is with Internet Explorer 8 and below. Have found a decent working solution. Issue Internet Explorer 8 and below is not triggering `click()` event set by jQuery (or even may be inline, not sure) on `<input />` elements, which have CSS property, `display` set to `none`. 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? Context The `input` to be clicked is given a style `display: none;`. And the function is given in the `click` event of the `input`. Since the whole stuff is inside the `label`, it triggers the `click` event on the `input` when the `label` clicked. You can take this as some kind of pretty selector, hiding the `input`. The `label` implicitly transfers the `click` event to the first `input` by default, and that is what I wanna use it here. I don't want the users to see the ugly `input` here. Expected browser behaviour, but not working. HTML ``` <ul> <li> <label> <input type="button" value="Button 1" /> Hello! This is a list item #1. </label> </li> <li> <label> <input type="button" value="Button 2" /> Hello! This is a list item #2. </label> </li> <li> <label> <input type="button" value="Button 3" /> Hello! This is a list item #3. </label> </li> </ul> ``` The Exact CSS which caused the Issue ``` 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;} ``` JavaScript ``` $(document).ready(function(){ $("input").click(function(){ alert("Hey you! " + $(this).attr("value")); }); }); ``` Fiddle: http://jsfiddle.net/qSYuP/ Update #1: Tried giving `for` attribute: ``` <label for="btn1"> <input type="button" value="Button 1" id="btn1" /> ``` Still doesn't work! Update #2: Tried CSS `visibility: hidden;`: ``` ul li label input {visibility: hidden;} ``` Breaks layout. But, still doesn't work! Update #3: Tried CSS `position: absolute;`: ``` ul li label {overflow: hidden;} ul li label input {position: absolute; left: -99em;} ``` Works! I am not in a position to use `overflow: hidden;`, seriously caught! Update #4: Manually triggering the `click()` function: ``` $(document).ready(function(){ $("input").click(function(){ console.log("Hey you! " + $(this).attr("value")); }); $("label").click(function(){ $(this).find("input").click(); }); }); ``` Well, IE 8 goes out of stack after printing `LOG: Hey you! Button 3` for 1209 times! ``` 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 ``` Works Infinitely! Should be an issue with my script! Solution: Kind of crappy fix, but did the trick! Since it is because IE 8, which supports `opacity`, I had to use `display: inline-block;` with `opacity: 0;`. ``` ul li label input { opacity: 0; width: 0px; height: 0px; display: inline-block; padding: 0; margin: 0; border: 0; } ``` Now the `input`'s box is hidden, literally. This fix is only for IE 8! Had to fix using the IE 8 and below Hack: ``` 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; } ``` Fiddle: http://jsfiddle.net/VSQbD/