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/
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
Vous devez vous connecter pour publier un commentaire.
Je pense que c'est assez simple. Vous avez juste à utiliser des gestionnaires de clic sur les éléments visibles. Si vous souhaitez un clic sur le
<label>
ou la<li>
au travail lors de l'<input>
objet est caché et vous voulez qu'il fonctionne dans tous les navigateurs, alors vous avez juste besoin de mettre un gestionnaire de clic sur le<label>
ou la<li>
parce que c'est un objet visible qui va recevoir le clic lorsque la<input>
est caché.label
implicitement les transferts de laclick
événement pour la premièreinput
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 vilaininput
ici. Attendu le comportement du navigateur, mais pas de travail. La chose est, il fonctionne dans tous les navigateurs standard!Prévue le comportement du navigateur n'est pas quelque chose qui existe réellement dans le développement web...
attendez-vous quelque incantation magique qui va donner les caractéristiques de IE8 qu'il n'a pas. Le travail est d'attacher un gestionnaire de clic sur un objet visible. Vous pouvez garder le
<input>
élément caché, mais vous avez besoin d'un gestionnaire de clic sur un élément visible si vous voulez un code à la loi sur le clic.devinez quoi! IE8 ne fait pas de donner à l'événement click à l'caché
<input>
élément afin de cesser de demander pour elle de le faire, il ne le fait pas. Vous avez besoin de code autour de ce que par le fait d'avoir un gestionnaire de clic sur un élément visible, puis le déclenchement de la même base de code que vous avez pour les gestionnaires de clic sur le<input>
élément. C'est une façon de résoudre les problèmes d'interopérabilité dans les navigateurs plus anciens.l'amour de votre commentaire à propos de "attendu comportement du navigateur"!
OriginalL'auteur jfriend00
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 à utiliserdisplay: inline-block;
avecopacity: 0;
.Maintenant la
input
'boîte est caché, littéralement. Ce correctif est uniquement pour IE 8!Essayé d'utiliser le IE 8 Hack:
Ouais, trouvé le problème, de manière ciblée, il fixe! 🙂 BTW, qu'avez-vous changé dans le violon?
je viens de modifier le code js fait l'étiquette cliquable et trouvé les entrées de valeur de l'.
Ah vu que. Mec, le problème, considérons un jolie, où lorsque vous ajoutez une classe à l'
label
, il affiche un joli tique de l'image. Dans ce cas, vous devez déclencher leinput
pour définir la valeur de soumettre le formulaire. Got it?vous pouvez aussi le faire dans l'autre sens en ajoutant de l'événement de clic sur les parents d'intrants tels que : jsfiddle.net/BerkerYuceer/VSQbD/2
OriginalL'auteur Praveen Kumar Purushothaman
Pourriez-vous pas de position de l'élément absolu, mais qu'il reste bien à quelque chose comme-99999px?
Je sais, mais quand tout le reste échoue...
Avez-vous essayé le "pour" de l'attribut sur les étiquettes et un id sur les entrées?
Vérifier la mise à Jour #1 dans la question. Il n'a pas de travail! Voir, dis seulement pour IE 8 et ci-dessous. IE 9 manie à merveille!
+1
pour l'idée! 🙂OriginalL'auteur TommyBs
différents navigateurs n'interprètent
display:none
différemment.display:none
signifie, en réalité, l'élément doit disparaître, rendant le jquery difficile à trouver dans le DOM.une meilleure façon est d'utiliser
visibility:hidden
et ensuite utiliserclick
méthodevisibility: hidden;
ne fonctionne pas trop!OriginalL'auteur the saad arshad
Votre code est assez incorrect..
input
à l'intérieur delabel
?dans votre mise à jour 4, vous pourriez faire un
event.stopPropagation
pour 'input`, cliquez sur et qui permettrait de résoudre l'infini problèmeinput
à l'intérieur de lalabel
est la droit chemin. Voir stackoverflow.com/questions/774054/... 🙂bien que valide n'a tout simplement pas son droit à la plupart des gens, même à cette page. Ne sais pas valide . merci
OriginalL'auteur Gaurav Shah
Jamais été touchée par ce que je fais les choses un peu différemment de toute façon - cliquez sur l'étiquette ne
input.checked = !input.checked; return false;
, alors un événement "change" sur l'entrée (plutôt que d'un événement de clic).OriginalL'auteur Rycochet