OnClick dynamique dans IE, Safari, Firefox

Question

J'ai le peu de code suivant. J'essaie d'ajouter dynamiquement des options déroulantes à une seconde liste déroulante en fonction de la sélection dans une première liste déroulante. Les deux sont générés via un appel Ajax à un script qui extrait les données d'une base de données. Voici le code pertinent.

function setSub(doc) { 
    // Setup some variables 
    var sNode = document.getElementById('4'); // GRAB THE ELEMENT HERE 
    var rmiData = doc.getElementById('rmiData').innerHTML; 
    var aItems = rmiData.split("|"); 
    var aVals; 
    // Set some background 
    sNode.style.background = "#fff"; 
    // Loop through adding options to the drop down 
    for (var x = 0; x < (aItems.length -1); x ++) { 
    aVals = aItems[x].split("="); 
    // ADD OPTIONS DYNAMICALLY TO SECOND DROP-DOWN HERE 
    sNode.options[x+1] = new Option(aVals[1],aVals[0],false,false); 
    // PROBLEM HERE: ADD ONCLICK TO THE OPTION WE JUST CREATED 
    sNode.options[x+1].onclick = function() { fixDayList(); }; 
    //sNode.options[x+1].onclick = new Function("fixDayList();"); 
    //sNode.options[x+1].setAttribute("onclick", "fixDayList();"); 
    // END PROBLEM LINES 
    } 
    // Set the length 
    sNode.length = x+1; 
    // Select the first item in the list 
    sNode[0].selected = true; 
} 

Si vous remarquez la section après la ligne « // problème ici », je l'ai essayé d'ajouter l'événement onclick de trois façons différentes. Tous les 3 fonctionnent correctement dans Firefox. Aucun des 3 ne fonctionne dans IE6 ou Safari (je ne suis pas sûr sur IE8). Des suggestions pour cela? Le reste du code utilise du JavaScript old school que j'ai copié à partir d'un code existant qui fonctionne et j'essaye juste d'ajouter onclick à ma version (de préférence sans réécrire beaucoup de code).

Vous ne savez pas pourquoi les événements onclick ne se déclenchent pas à partir de Safari et d'IE?

J'ai accès à jQuery dans mon code. Donc, si jQuery corrige cela en interne et que je peux trouver le bon sélecteur à utiliser, cela fonctionnera. Mais, je ne suis pas sûr de savoir comment sélectionner cela, exactement. J'ai essayé:

$ ('# 4'). Options [x + 1] .click (fonction() {fixDayList();});

Mais ce sélecteur est mauvais et je ne suis pas sûr exactement comment choisir le bon (je suis vert dans les voies de jQuery).

Answer 1

Utilisez quelque chose comme ceci:

if(window.addEventListener){ 
    sNode.options[x+1].addEventListener('click', fixDayList, false); 
} else if (window.attachEvent){ 
    sNode.options[x+1].attachEvent('onclick', fixDayList); 
} else { 
    sNode.options[x+1].onclick = fixDayList; 
} 

Mise à jour:

Dans Safari, à moins que les option éléments sont visibles et non affichés dans une liste déroulante, ils ne seront jamais déclencher un événement click. Mais, si vous ajoutez size=10 ou quoi que ce soit à votre élément select, Safari déclenchera alors des événements de clic sur les éléments option.

Votre meilleur pari sera d'écouter l'événement change sur l'élément select au lieu d'essayer d'utiliser click sur le options.