Jquery mobile & change event & iphone & select_问答_开发者

Jquery mobile & change event & iphone & select

开发者 https://www.devze.com 2023-03-28 20:57 出处：网络

My goal: In case someone selects a specific value from an select box something is supposed to happen.

My environment:

Jquery: 1.62
Jquery Mobile: 1.0b
iOS: 4.3.5

I am binding the event handler to the select box by

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

The code works without jquery mobile. Is it a bug or not the right approach for event binding in Jquery Mobile?

Pls find below the complete code example.

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

   开发者_C百科                     </select>
               </div> <!-- /page -->
        </form>                               
    </div><!-- /container  -->
</body>
</html>

I think your markup is a little out of order, Here is a live exmaple:

http://jsfiddle.net/phillpafford/PdkQ5/
http://jsfiddle.net/phillpafford/PdkQ5/5/ (with page navigation)

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>