JQuery UI Выбираемое событие остановки не работает в IE - PullRequest
Новая
       1

JQuery UI Выбираемое событие остановки не работает в IE

0 голосов
/ 22 июня 2010

У меня есть компонент выбора 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.Обычно предполагается отправить строку в текстовое поле openid_identifier после того, как в окне выбора Google или Yahoo выбрано.

Есть идеи, как заставить это работать в IE?

Ответы [ 3 ]

1 голос
/ 23 июня 2010

правильно, я еще раз взглянул на код и понял, что допустил небольшую ошибку, упс!

Это более понятный код для вас, он просто удаляет все пробелы: 

<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>
1 голос
/ 22 июня 2010

Похоже, что текст не нравится IE

попробуйте вместо этого: 

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

Это сработало для меня, когда я попробовал твой код

EDIT: вот код, который я использовал для проверки 

<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>
0 голосов
/ 23 июня 2010

Похоже, что проблема была в $ (selected) .html () вернула "Google" (с пробелом) в ie7, но вернула "Google" в ie8, firefox и chrome.

Предыстория: я попробовал точный html как ответ Джеймса Студдарта, который работал под ie8, но под IE7 оператор if ($ (selected) .html () == "Google") возвращал false каждый раз и даже после попытки .text .val, .html и т.д ... и разные машины / конфиги. Затем я попытался создать переменную со значением .html следующим образом: var chosen = $(selected).html(). Это вернуло "Google" в IE7. Чтобы исправить этот загадочный символ пробела в 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/");
             }
         });
     }
 });

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...