2013-05-16 3 views
2

У меня есть обработчик событий, который следует вызывать после изменения значения selectbox (id = "save-login"). Выбранное поле отображается как слайдер, поэтому я использую событие «slidestop». На странице есть кнопка входа в систему, которая отправляет формуляр в то же местоположение URL-адреса. После отправки формы снова отобразится одна и та же страница.jQuery Мобильный обработчик событий не всегда работает

К сожалению, после первого представления обработчик события больше не будет вызываться при изменении значения selectbox. Если я отправлю форму во второй раз, обработчик часто будет работать снова.

Это код моей страницы и сценарий, который используется для привязки обработчика события:

<!DOCTYPE HTML> 
<HTML> 
    <head>  
     <link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" /> 
     <link rel="stylesheet" href="jquery.mobile-1.3.0.CSS" /> 

     <script src="js/jquery-1.9.1.min.js"></script> 
     <script src="js/jquery.mobile-1.3.0.min.js"></script> 
    </head> 
    <body> 
     <div data-role="page" id="login" data-theme="c">   
      <div data-role="content"> 
       <div id="loginform"> 
        <form action="login_test.html" method="post" data-transition="flip"> 
         <ul data-role="listview" data-inset="true" data-theme="c"> 
          <li> 
           <label for="save-login">Login-Informationen speichern</label> 
           <select name="save-login" id="save-login" data-role="slider"> 
            <option value="0">Nein</option> 
            <option value="1">Ja</option> 
           </select>      
          </li> 
         </ul>   
         <input type="submit" value="Login" data-role="button"> 
        </form> 
       </div> 
      </div> 

     <script type="text/javascript"> 
     $(":jqmData(role='page')").on("pageshow", function(event) { 
      var selectbox = $("#save-login"); 
      selectbox.on("slidestop", function(event, ui) { 
       if (this.value == "1") { 
        alert("Autologin enabled"); 
       } 
      }); 
     }); 
     </script>   

     </div> 
    </body> 
</HTML> 

Кто-нибудь есть идея о том, что вызывает обработчик события, чтобы не работать правильно?

+0

почему вам привязать его к 'pageshow'? удалите его, поскольку он будет работать только после срабатывания событий только для 'pageshow'. – Omar

+1

Событие «страницы» запускается каждый раз при загрузке страницы. Кажется, что это работает, как и ожидалось, даже элемент selectbox-object найден и добавлен обработчик. –

ответ

1

Измените код следующим образом:

$(document).off("pageshow", ":jqmData(role='page')").on("pageshow", ":jqmData(role='page')" ,function(event) { 
    $(document).on("slidestop", "#save-login",function(event, ui) { 
     if (this.value == "1") { 
      alert("Autologin enabled"); 
     } 
    }); 
}); 
+0

Спасибо за подсказку! Привязка обработчика событий с помощью «on» и параметра селектора сделала трюк. Мне просто интересно, почему это не сработало без элемента селектора. Но хорошо ... –

+0

Поскольку вы используете страницы, каждый раз, когда вы возвращаетесь на страницу, yoz снова связывали событие click. Вот почему я использовал для удаления события щелчка, прежде чем снова применить его. Второе событие клика всегда отрицает первый. В основном, когда вы всегда можете использовать делегированный поиск событий, вы привязываете событие к документу, и оно найдет способ исправления элемента. – Gajotres

+0

Вы написали: «Событие второго клика всегда отрицает первый», что вы имеете в виду? Является ли это особым поведением метода «on»? Я не нашел ничего в документации ... –

Смежные вопросы