<p>choisi:ouvert ne fonctionne pas</p>

Créé le 22 déc. 2013  ·  5Commentaires  ·  Source: harvesthq/chosen

J'essaie d'ouvrir une sélection après un clic sur un bouton, mais cela ne fonctionne pas. Si j'insère et alert() après le déclencheur, il s'ouvre...
(En utilisant la v1.0 choisie avec jquery)

Exemple:

<select id="select">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>
<br>
<button onclick="$('#select').trigger('chosen:open'); ">Press this button to open (doesnt work) </button>
<button onclick="$('#select').trigger('chosen:open'); alert('ups!');">Press this button to open (work???)</button>

<script>
$(document).ready(function() {
$('#select').chosen();
});
</script>

exemple dans : http://jsfiddle.net/EArg6/28/

picture vpode

Commentaire le plus utile

Lorsque vous cliquez sur le bouton, Chosen reçoit l'événement chosen:open . Cependant, l'événement continue de bouillonner dans le DOM et Chosen détecte immédiatement un clic sur un élément qui n'est pas le Chosen actif... alors il le ferme. Avoir du sens ?

Si vous travaillez avec du JS en ligne, la solution la plus simple consiste à utiliser setTimeout pour sortir de la pile d'événements actuelle :

onClick="setTimeout(function(){ $('#select').trigger('chosen:open'); }, 0)"

Cependant, vous ne devriez certainement pas utiliser JS en ligne. Vous pouvez toujours utiliser setTimeout si vous le souhaitez, mais le simple fait d'arrêter le bouillonnement de l'événement devrait suffire.

$('button').on("click", function(evt){
  evt.stopPropagation();
  $('#select').trigger('chosen:open');
});

J'ai mis à jour votre violon avec ce code de travail : http://jsfiddle.net/EArg6/33/

picture pfiller le 28 déc. 2013
👍4

Tous les 5 commentaires

Aucun des deux boutons ne fonctionne pour moi dans votre Fiddle (dans Safari).

Quel navigateur/version utilisez-vous ?

tjschuck picture tjschuck le 23 déc. 2013

Je l'ai testé avec :

  • Firefox 25.0.1
  • Opéra 12.16
  • Chrome 31.0.1650.63 m

Le premier bouton ne fonctionne pas
Le deuxième bouton ouvre la liste des options (pour se fermer uniquement lorsque je ferme la case "alerte").

vpode picture vpode le 23 déc. 2013

Lorsque vous cliquez sur le bouton, Chosen reçoit l'événement chosen:open . Cependant, l'événement continue de bouillonner dans le DOM et Chosen détecte immédiatement un clic sur un élément qui n'est pas le Chosen actif... alors il le ferme. Avoir du sens ?

Si vous travaillez avec du JS en ligne, la solution la plus simple consiste à utiliser setTimeout pour sortir de la pile d'événements actuelle :

onClick="setTimeout(function(){ $('#select').trigger('chosen:open'); }, 0)"

Cependant, vous ne devriez certainement pas utiliser JS en ligne. Vous pouvez toujours utiliser setTimeout si vous le souhaitez, mais le simple fait d'arrêter le bouillonnement de l'événement devrait suffire.

$('button').on("click", function(evt){
  evt.stopPropagation();
  $('#select').trigger('chosen:open');
});

J'ai mis à jour votre violon avec ce code de travail : http://jsfiddle.net/EArg6/33/

pfiller picture pfiller le 28 déc. 2013
👍4

merci @pfiller

pruett picture pruett le 22 avr. 2014

Merci @pfiller , cette solution et cette explication m'ont épargné beaucoup de brûlures d'estomac !

shivaray picture shivaray le 26 juil. 2016
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

lordspace picture lordspace  ·  6Commentaires
jbrooksuk picture jbrooksuk  ·  6Commentaires
gandarez picture gandarez  ·  5Commentaires
eduardokranz picture eduardokranz  ·  6Commentaires
asvetlenko picture asvetlenko  ·  3Commentaires