我有以下演示 HTML 文件,我想使用 JQuery-Mobile 可折叠展开/折叠事件,但无法触发 JavaScript 事件。我基于这里的 JSFiddle 示例:http://jsfiddle.net/6txWy/ http://jsfiddle.net/6txWy/
我觉得我只是忽略了一些简单的事情,但这是我的 HTML 文件:
<html>
<head>
<title>References</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$('#my-collaspible').bind('expand', function()
{
alert('Expanded');
}).bind('collapse', function () {
alert('Collapsed');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" id="my-collaspible">
<h3>My Title</h3>
<p>My Body</p>
</div>
</div>
</div>
</body>
</html>
折叠和展开工作正常,但警报从未被触发。
谢谢!
跳蚤
Add a PageInit http://jquerymobile.com/demos/1.1.0/docs/api/events.html调用以确保在绑定事件之前加载页面
Example:
- http://jsfiddle.net/UT7kQ/ http://jsfiddle.net/UT7kQ/
Code:
$('#home').live('pageinit', function(event) {
$('#my-collaspible').bind('expand', function() {
alert('Expanded');
}).bind('collapse', function() {
alert('Collapsed');
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)