Jquery mobile & Change event & iphone & select

我的目标:如果有人从选择框中选择了一个特定的值，应该会发生一些事情。

我环境:

iOS: 4.3.5

我通过

将事件处理程序绑定到选择框

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

代码工作没有jquery移动。这是一个错误或不是在Jquery移动事件绑定的正确方法?

请在下面找到完整的代码示例。

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

我觉得你的标记有点乱，下面是一个生动的例子:

http://jsfiddle.net/phillpafford/PdkQ5/
http://jsfiddle.net/phillpafford/PdkQ5/5/(带页面导航)

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>

相关内容

最新更新

热门标签：