IE 8 and below not triggering click on elements which have display: none; Any workaround?

Question

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/

Answer 1

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.

Answer 2

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!

Tried using the IE 8 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;
}