Jquery mobile & change event & iphone & select
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>
加载中,请稍侯......
精彩评论