JQuery UI可选停止事件在IE中不起作用

时间:2010-06-22 08:32:17

标签: asp.net html jquery-ui asp.net-mvc-2

我有一个JQuery选择组件和一个javascript函数来处理停止事件:

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

该脚本在firefox和chrome中运行良好,但在IE7 / 8中运行不正常。一旦点击google或yahoo选择框,通常应该将字符串发送到openid_identifier文本框。

如何让它在IE中运行?

3 个答案:

答案 0 :(得分:1)

看起来ICE不喜欢Text

试试这个:

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

当我尝试你的代码时,这对我有用

编辑: 这是我用

测试的代码
<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>

答案 1 :(得分:1)

我再看了一下代码,我意识到我犯了一些错误oops!

这是一些更干净的代码,它只删除所有空格:

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

答案 2 :(得分:0)

看起来问题是$(已选中).html()在ie7中返回“Google”(带空格)但在ie8,firefox和chrome中返回“Google”。

背景:我尝试了确切的html作为James Studdart的答案在ie8下工作但在IE7下if($(选择).html()==“Google”)语句每次甚至在尝试.text后都返回false, .val,.html等......以及不同的机器/配置。然后我尝试使用.html值创建一个变量:var chosen = $(selected).html()。这在IE7中返回“Google”。为了修复这个神秘的IE7空间字符,我修改了脚本以确保空间不会影响结果:

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