JQuery UI sélectionnable événement d'arrêt ne fonctionne pas dans IE

J'ai un JQuery sélectionner le composant et une fonction javascript pour gérer l'événement d'arrêt:JQuery UI sélectionnable événement d'arrêt ne fonctionne pas dans IE

 <script type="text/javascript"> 
     $("#selectable").selectable({ 
      stop: function() { 
       $(".ui-selected", this).each(function(i, selected) { 
        if ($(selected).text() == "Google") { 
         $("#openid_identifier").val("https://www.google.com/accounts/o8/id"); 
        } 
        else if ($(selected).text() == "Yahoo") { 
         $("#openid_identifier").val("http://yahoo.com/"); 
        } 
       }); 
      } 
     }); 
    </script>

Le script fonctionne très bien dans Firefox et Chrome, mais pas dans IE7/8. Il est normalement supposé envoyer une chaîne à la zone de texte openid_identifier une fois que la boîte de sélection google ou yahoo est cliquée.

Des idées pour que cela fonctionne dans IE?

Source

2010-06-22 James Santiago

Pourriez-vous s'il vous plaît poster votre code html trop pour déboguer votre problème? – Mauro

droite j'ai pris un autre regard sur le code, et je compris que je faisais un peu de une erreur oups!

Ce code est un peu plus propre pour vous, il enlève juste tous les espaces:

<script type="text/javascript"> 
    $(function() { 
     $("#selectable").selectable({ 
    stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) { 
        if($(selected).html().replace(/\s/g, "") == "Google") { 
         alert("https://www.google.com/accounts/o8/id"); 
        } 
        else if ($(selected).html().replace(/\s/g, "") == "Yahoo") { 
         alert("http://yahoo.com/"); 
        } 
       }); 
} 
}); 
    }); 
    </script>

Source

2010-06-23 16:29:09 JamesStuddart

Ceci est plus joli que mon correctif alors je vais le marquer comme la réponse. Merci pour le super effort! –

Pas un problème, jQuery est génial, mais IE nous gêne encore à chaque tour, lol. – JamesStuddart

On dirait texte isnt aimé par IE

essayer ceci:

 <script type="text/javascript"> 
    $("#selectable").selectable({ 
     stop: function() { 
      $(".ui-selected", this).each(function(i, selected) { 
       if ($(selected).html() == "Google") { 
        $("#openid_identifier").val("https://www.google.com/accounts/o8/id"); 
       } 
       else if ($(selected).html() == "Yahoo") { 
        $("#openid_identifier").val("http://yahoo.com/"); 
       } 
      }); 
     } 
    }); 
</script>

Cela a fonctionné pour moi quand j'ai essayé votre code

EDIT: est le code ici je tester avec

<html> 
<head> 

<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>make layout</title> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
<style type="text/css"> 
    .testdiv { background: silver; float:left;margin:0;padding:0;} 
</style> 
</head> 
<body> 
<style type="text/css"> 
    #feedback { font-size: 1.4em; } 
    #selectable .ui-selecting { background: #FECA40; } 
    #selectable .ui-selected { background: #F39814; color: white; } 
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 
     $("#selectable").selectable({ 
    stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) { 
    alert($(selected).html()); 
        if($(selected).text() == "Google") { 
         alert("https://www.google.com/accounts/o8/id"); 
        } 
        else if ($(selected).text() == "Yahoo") { 
         alert("http://yahoo.com/"); 
        } 
       }); 
} 
}); 
    }); 
    </script> 


<div class="demo"> 

<ol id="selectable"> 
    <li class="ui-widget-content">Google</li> 
    <li class="ui-widget-content">Yahoo</li> 

</ol> 

</div> 
</body> 
</html>

Source

2010-06-22 13:16:46 JamesStuddart

Cela fonctionne dans IE8 mais pas 7. Avez-vous un aperçu de pourquoi IE7 pourrait ne pas aimer ça? –

Je viens de tester cela dans IE 8, 7 et 6 et cela fonctionne pour moi, voulez-vous que je vous envoie le fichier html complet que j'ai créé pour le tester? – JamesStuddart

Ok ça va aller –

Il semble que le problème ait été $ (sélectionné). html() a retourné "Google" (avec un espace) dans ie7 mais a renvoyé "Google" dans ie8, firefox et chrome. Contexte: J'ai essayé le html exact comme réponse de James Studdart qui fonctionnait sous ie8 mais sous IE7 l'instruction if ($ (selected) .html() == "Google") renvoyait false à chaque fois et même après avoir essayé .text , .val, .html etc ... et différentes machines/configs. J'ai ensuite essayé de créer une variable avec la valeur .html en tant que telle: . Cela a retourné "Google" dans IE7. Pour résoudre ce mystérieux personnage de l'espace IE7 J'ai modifié le script pour assurer l'espace n'a pas affecté le résultat:

<script type="text/javascript"> 
$("#selectable").selectable({ 
    stop: function() { 
     $(".ui-selected", this).each(function(i, selected) { 
      var chosen = $(selected).html(); 
      var subSection = chosen.substring(4, 0); 
      if (subSection == "Goog") { 
       $("#openid_identifier").val("https://www.google.com/accounts/o8/id"); 
      } 
      else if (subSection == "Yaho") { 
       $("#openid_identifier").val("http://yahoo.com/"); 
      } 
     }); 
    } 
});

Source

2010-06-23 11:12:36

JQuery UI sélectionnable événement d'arrêt ne fonctionne pas dans IE

Répondre

Questions connexes