jQuery sélectionnez Modifier/cliquez sur le problème - le changement ne fonctionne pas dans IE, le clic ne fonctionne pas dans Chrome

Question

Comme le titre l'indique, j'ai un problème avec la liaison à un changement dans une liste de sélection déroulante - il semble que "ne fonctionne pas avec IE (7 ou 8), donc quand j'essaie l'alternative et utilise un événement" click ", ça marche dans IE mais ça ne marche pas dans Chrome! Est-ce que je manque quelque chose d'évident ici?

Voici mon code:

//event handler for showing hidden form elements (also ensures only relevant hidden els shown) 
     //IE needs click event instead of change 
     $('.select_change').live("change", function(){ 
      //check if value is other 
      if ($(this).val() == 'other') 
       $(this).parent().find(".hidden").show(); 
      //if user changes select value from other then hide input 
      if ($(this).val() != 'other') 
       $(this).parent().find(".hidden").hide(); 
      return false; 
     }); 

Le code HTML déroulant est la suivante:

<select id="title" name="title" class="validate[required,funcCall[validateNotDefault]] select_change" > 
<option value="default" selected="selected">Please choose from options</option> 
<option value="yellow">Yellow</option> 
<option value="black">Black</option> 
<option value="chocoloate">Chocolate</option> 

<option value="other">Other</option> 
</select> 

Answer 1

change ne fonctionne toujours pas complètement bulle correctement dans IE, vous pouvez le faire travailler dans les deux cas si:

$('.select_change').live("change click", function(){ 
    $(this).parent().find(".hidden").toggle($(this).val() == 'other'); 
}); 

Il utilise encore .live(), répond simplement aux deux événements ... depuis ce que vous faites n'est pas blessé en tirant une ou deux fois, c'est bien de le faire dans ce cas. Ce qui précède est juste un peu plus court en utilisant .toggle(bool) pour simplifier votre logique un peu.

Answer 2

Essayez d'utiliser .bind $() ou .Modification $() au lieu. Je n'ai pas rencontré ce problème avant.

$('.select_change').change(function(){ 
      //check if value is other 
      if ($(this).val() == 'other') 
       $(this).parent().find(".hidden").show(); 
      //if user changes select value from other then hide input 
      if ($(this).val() != 'other') 
       $(this).parent().find(".hidden").hide(); 
      return false; 
     }); 

Answer 3

Je suppose que vous utilisez la méthode .live() car vous pouvez ajouter d'autres objets après le rendu du document. Sinon .bind() ou .change() devrait suffire à vos besoins.

Puisque vous avez mentionné que .live ("click") fonctionnera avec IE et .live ("change") fonctionnera avec tout le reste, vous pouvez utiliser .live ("click change") puisque .live acceptera plusieurs événements séparés par des espaces.

Answer 4

Pour réparer le problème de "changement" dans IE voici ce que j'ai fait.

Il s'agit probablement d'un problem with a race condition avec des champs de saisie dans IE. En créant un thread distinct pour gérer les modifications de l'interface utilisateur, onChange doit se déclencher correctement dans IE.

Je résolu une situation similaire en procédant comme suit dans mon gestionnaire de changement:

if (jQuery.browser.msie) { 
    setTimeout(DoSomeUIChange, 0); 
} else { 
    DoSomeUIChange(); 
} 

Le DoSomeUIChange se tiré dans un thread séparé et ainsi supprime la condition de course.