Jquery Mobile и изменить событие и Iphone и выберите - PullRequest
Новая
       2

Jquery Mobile и изменить событие и Iphone и выберите

0 голосов
/ 18 августа 2011

Моя цель: если кто-то выбирает определенное значение из поля выбора, то что-то должно произойти.

Мое окружение:

  • Jquery: 1,62
  • Jquery Mobile: 1.0b
  • iOS: 4.3.5

Я связываю обработчик событий с полем выбора с помощью 

$( "#location" ).bind( "change", function(event, ui) {
   alert("foo");
});

Код работает без jqueryмобильный.Это ошибка или неправильный подход для привязки событий в Jquery Mobile?

Просьба найти ниже полный пример кода. 

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript">
    </script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>
    <script>
       $(document).ready(function() 
       {                  
            $( "#location" ).bind( "change", function(event, ui) {
             alert("foo");
             });
      }); 
    </script>
    <link rel="stylesheet" href="css/theme-i.css">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   <div id="container">
       <form>             
            <div data-role="page">
                        <select name="location" id="location" >
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>

                        </select>
               </div> <!-- /page -->
        </form>                               
    </div><!-- /container  -->
</body>
</html>

1 Ответ

1 голос
/ 18 августа 2011

Я думаю, что ваша разметка немного вышла из строя, Вот живой пример:

JS: 

$("#location").change(function() {
    alert('Location Changed value: '+$('#location option:selected').val()+' text: '+$('#location option:selected').text());
});

HTML: 

<div data-role="page" id="home">
   <div id="container">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#locationPage">Location Page</a></li> 
        </ul>                               
    </div>
</div>

<div data-role="page" id="locationPage">
   <div id="container">
       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul>
       <br />
       <form action="#" id="theForm" method="get">                         
            <select name="location" id="location" >
                <option value="1">Option1</option>
                <option value="2">Option2</option>
            </select>              
        </form>                               
    </div>
</div>
...