IE 8 et ci-dessous déclenche pas cliquer sur les éléments qui ont display: none; Aucune solution de contournement?

Le problème avec Internet Explorer 8 et ci-dessous. Ont trouvé une bonne solution de travail.

Question

Internet Explorer 8 et ci-dessous n'est pas de déclenchement click() événement défini par jQuery (ou même peut-être en ligne, pas sûr) sur <input /> éléments, qui ont une propriété CSS, display ensemble de none. Il fonctionne dans Internet Explorer 9, Mozilla Firefox, et Google Chrome. Bizarre. C'est la façon dont le code est, et quel est le travail autour de pour Internet Explorer 8 et ci-dessous?

Contexte

La input être cliqué est donné un style display: none;. Et la fonction est donnée dans le click cas de la input. Etant donné que l'ensemble des choses est à l'intérieur de la label, il déclenche la click de l'événement sur la input lorsque le label cliqué. Vous pouvez prendre cela comme une sorte de jolie sélecteur de cacher le input.

La label implicitement les transferts de la click événement pour la première input par défaut, et c'est ce que j'ai envie de l'utiliser ici. Je ne veux pas que les utilisateurs de voir le vilain input ici. Attendu le comportement du navigateur, mais pas de travail.

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>

L'Exacte CSS qui a causé le Problème

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"));
    });
});​

Violon: http://jsfiddle.net/qSYuP/


Mise à jour #1: Essayé de donner for attribut:

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

Ne fonctionne toujours pas!


Mise à jour #2: Essayé CSS visibility: hidden;:

ul li label input {visibility: hidden;}

Sauts de mise en page. Mais, ne fonctionne toujours pas!


Mise à jour #3: Essayé CSS position: absolute;:

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

Fonctionne! Je ne suis pas dans une position à utiliser overflow: hidden;, sérieusement pris!


Mise à jour #4: Manuellement le déclenchement de la click() fonction:

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

Bien, c'est à dire 8 sort de la pile après l'impression LOG: Hey you! Button 3 pour 1209 fois!

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 

Œuvres À L'Infini! Doit être un problème avec mon script!


Solution: merdiques Genre de corriger le problème, mais a fait le tour!

Depuis c'est parce que IE 8, qui prend en charge opacity, j'ai eu à utiliser display: inline-block; avec opacity: 0;.

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

Maintenant la input'boîte est caché, littéralement. Ce correctif est uniquement pour IE 8!

Fixer à l'aide de la IE 8 et ci-dessous Hack:

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

Violon: http://jsfiddle.net/VSQbD/

pourquoi voudriez-vous attendre d'un gestionnaire de clic à travailler sur quelque chose qui ne peut pas être cliqué sur?
L'entrée pour être cliqué est caché. Et la fonction est déclenchée sur le clic de la input. Etant donné que l'ensemble des choses est à l'intérieur de la label, il déclenche la click de l'événement sur la input lorsqu'il est cliqué. Un peu certains assez sélecteur, vous voyez?
Pourquoi ne pas vous venez de lier le gestionnaire de la li? Aussi, il est probablement quelque chose à voir avec le fait IE ne reconnaît pas imbriquée entrées à être associé avec les parents des étiquettes... peut-être que si vous utilisez le for attribut, il pourrait fonctionner... mais c'est juste moi deviner.
Essayé de donner for attribut: <label for="btn1"> <input type="button" value="Button 1" id="btn1" /> ne fonctionne Toujours pas!
avez-vous essayé de déclencher directement? en appelant $('input').click() sur une autre procédure et si oui quels ont été les résultats?

OriginalL'auteur Praveen Kumar Purushothaman | 2012-12-10