JQuery UI Selectable stop event doesn't work in IE_问答_开发者

I have a JQuery select component and a javascript function to handle the stop event:

     <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/");
                     }
       开发者_JAVA百科          });
             }
         });
     </script>

The script works fine in firefox and chrome but not in IE7/8. It is normally supposed to send a string to the openid_identifier textbox once the google or yahoo select box is clicked.

Any ideas how to get this to work in IE?

right I took another look at the code, and I realised I made a bit of a mistake oops!

This is some cleaner code for you, it just removes all white space:

<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>

Looks like Text isnt liked by IE

try this instead:

     <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>

That worked for me when I tried your code

EDIT: here is the code I used to test with

<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>

It looks like the issue was $(selected).html() returned "Google " (with a space) in ie7 but returned "Google" in ie8, firefox and chrome.

Background: I tried the exact html as James Studdart's answer which worked under ie8 but under IE7 the if($(selected).html() == "Google") statement returned false every time and even after trying .text, .val, .html etc... and different machines/configs. I then tried creating a variable with the .html value as such: var chosen = $(selected).html(). This returned "Google " in IE7. To fix this mysterious IE7 space character I modified the script to ensure the space didn't affect the result:

 <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/");
             }
         });
     }
 });