L’événement onclick ne fonctionne pas pour les options

Voici mon code qui fonctionne très bien dans Firefox mais pas dans Chrome. Faites-moi savoir comment résoudre ce problème. L’idée principale est d’appeler une fonction js en fonction de la valeur sélectionnée dans la zone de sélection:

 -- Select question type for this quiz -- 1) MCQs 2) True/False

option ne déclenchent pas les événements de souris en chrome.

Pour un élément select , vous utiliseriez l’événement onchange sur la sélection elle-même et la valeur de la sélection sera toujours identique à celle de l’option sélectionnée.

avec jQuery ce serait

 $('select').on('change', function() { var selected = this.value; });

Maintenant, je vois beaucoup de gens demander pourquoi pas l’événement du changement, eh bien parce que je ne veux pas avoir à le faire comme ça

Bien sûr, il y a beaucoup de choses de css sophistiquées que vous pouvez faire avec js pour surmonter la situation, mais cela signifie plus de code et plus d’événements et plus qui peuvent mal se passer …

En tant qu’utilisateur, si l’option que je veux est la toute première, pourquoi devrais-je d’abord cliquer sur la suivante pour pouvoir sélectionner la première! ma première intuition est de cliquer sur la première! mais cela ne sélectionne pas l’option et ne déclenche pas l’événement 🙁

C’est donc une bonne raison pour laquelle nous voulons que l’événement click soit associé à l’événement change que nous utiliserons également. (Comme une ceinture et des bretelles …)

Maintenant, j’ai aussi lu beaucoup de réponses / messages avec “Tu ne peux pas, utiliser le changement”, mais ce n’est pas tout à fait vrai, vous pouvez déclencher des événements de clic sur une option de sélection, mais le seul moyen de le faire fonctionner est si vous définissez une taille> 1, ce qui en fait plus une liste qu’un menu déroulant et c’est peut-être pour cela que cela fonctionne …

Cependant, si vous essayez de le faire de la manière suivante, cela ne fonctionnera pas!

 $("#select option").on('click',function(){}); //won't work! $(".option-class").on('click',function(){}); //won't work!  //won't work!

Une approche différente consisterait à append un écouteur d’événement à la et non aux options.

 var e = document.getElementById("qtype"); var selectedSelect= e.options[e.selectedIndex].value;

le code ci-dessus trouvera l’élément select et l’appellera e. Recherchez ensuite la valeur sélectionnée et appelez-la selectedSelect. Ensuite, vous pouvez simplement passer cette valeur dans la fonction question_type ().

 $(document).ready(function(){ $("#qtype").change(function(){ $(this).find('option:selected') // do something.... } })

J’ai fait une découverte intéressante, qui a un impact matériel sur cette question. REMARQUE: cela se produit sur la version de Chrome 63.0.3239.108 (Build officiel) (64 bits), fonctionnant sous Windows 7. Ce que je rapporte ici peut différer de Chrome s’exécutant sur d’autres plates-formes, mais il convient néanmoins de rechercher dans le même cas fonctionne sur d’autres plates-formes.

J’ai écrit du code pour créer des dialogs contextuels, me permettant de sélectionner diverses options. Le code permet aux dialogs d’apparaître les uns sur les autres dans l’ordre et d’être ignorés dans l’ordre inverse. Ce code a ensuite été couplé à deux dialogs, tous deux contenant des contrôles de sélection.

J’ai ensuite écrit une fonction, pour remplir ces contrôles de sélection avec des éléments d’option, auxquels étaient rattachés des écouteurs d’événements de clic. La fonction a été dûment appelée pour attacher des données aux options ajoutées aux contrôles de sélection correspondants.

Le dialog n ° 1 a ensuite été lancé. Le contrôle de sélection a été manipulé et l’événement de clic dûment déclenché sur les options que j’ai sélectionnées, le tout facilement observable grâce au traçage de [1] par le débogueur Crome et [2] à l’effet du code du programme d’écoute d’événement sur les autres éléments DOM du dialog. .

Le dialog n ° 2 a ensuite été lancé et recouvert du dialog n ° 1.

Le contrôle de sélection a ensuite été manipulé et … aucun événement de clic n’a été déclenché .

Quelle était la différence?

La différence était que le contrôle de sélection sur le dialog n ° 1 avait un ensemble d’atsortingbuts de taille (en particulier, size = “5”). Le contrôle de sélection sur le dialog n ° 2 ne comportait aucun atsortingbut de taille.

Au moment où j’ai défini l’atsortingbut size sur le contrôle de sélection sur le dialog n ° 2, les événements de clic ont été correctement déclenchés une fois de plus.

Si vous souhaitez que les événements de clic fonctionnent avec les options d’un contrôle de sélection sur Chrome, vous devez définir un atsortingbut de taille sur le contrôle de sélection, à savoir:

Si vous omettez cet atsortingbut de votre contrôle de sélection, les événements de clic seront ignorés.

Il rest maintenant à déterminer s’il faut définir l’atsortingbut size directement dans le fichier HTML avant d’exécuter le code JavaScript, ou si la définition d’un atsortingbut size en JavaScript avant l’attachement des options fonctionnera également. Laissez-moi revenir sur celui-ci pendant que je le teste.

EDIT: je viens de tester si l’ajout d’un atsortingbut de taille au contrôle de sélection en JavaScript, plutôt qu’au fichier HTML, permettait de gérer correctement les événements de clic des éléments d’option dans Chrome (les détails de version sont identiques à ceux de avant), et cela fonctionne aussi. Donc, code tel que:

 sel = document.getElementById("PickSecondaryClue"); sel.setAtsortingbute("size","5");

travaillera également.

Apparemment, il faut tenir compte de certaines réserves spécifiques concernant l’atsortingbut size dans Chrome: certaines valeurs sont documentées, du moins dans certaines versions, comme présentant des effets secondaires inattendus.

Maintenant, il rest à voir si cela fonctionne aussi dans Firefox.

EDIT 2: Fonctionne également dans Firefox. (57.0.2 64 bits)