IE 8 and below not triggering click on elements wh

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

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;
}

Answer 2

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 3

Never been hit by this as I do things slightly differently anyway - click on the label does input.checked = !input.checked; return false;, then have a "change" event on the input (rather than a click event).

Answer 4

different browsers interpret display:none differently. display:none actually means the element should disappear, making the jquery difficult to find in the DOM.

a better way is to use visibility:hidden and then use click method

Answer 5

Could you not position the element absolute, but set it's left property to something like -99999px?

Answer 6

Your code is pretty much incorrect..

• input inside label ?
• Events are suppose to bubble up and not downwards
• and its so simple.. if you want to know when li was clicked attach an handler to that and not to input

in your updated 4 you could do an event.stopPropagation for 'input` click and that would solve infinity problem