无法获取要执行的JQuery-Mobile可折叠展开/折叠事件 [英] Unable to get JQuery-Mobile collapsible expand/collapse event to execute
本文介绍了无法获取要执行的JQuery-Mobile可折叠展开/折叠事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要使用JQuery-Mobile可折叠的展开/折叠事件绑定以下演示HTML文件,但无法触发JavaScript事件.我在这里以JSFiddle示例为基础: http://jsfiddle.net/6txWy/
I have the following demo HTML file that I am tying to use the JQuery-Mobile collapsible expand/collapse events and I am not able to get the JavaScript event to fire. I am basing this off the JSFiddle example here: http://jsfiddle.net/6txWy/
我觉得我只是在忽略一些简单的东西,但这是我的HTML文件:
I feel like I am just overlooking something simple but here is my HTML file:
<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>
折叠和展开工作,但警报从未触发.
The collapse and expand work but the alerts are never fired.
谢谢! 跳蚤
推荐答案
Add a PageInit call to make sure the page is loaded before binding the events
示例:
代码:
$('#home').live('pageinit', function(event) {
$('#my-collaspible').bind('expand', function() {
alert('Expanded');
}).bind('collapse', function() {
alert('Collapsed');
});
});
这篇关于无法获取要执行的JQuery-Mobile可折叠展开/折叠事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文