Bot*_*Bot 0 jquery jquery-mobile
我有2个页面使用相同的模板.唯一不同的data-role="content"是不同的.我正在使用,$.mobile.changePage('page2.php');但all.js我头脑中的文件没有绑定到加载的元素page2.
'all.js'的脚本标签位于两个页面的头部,从我读过的内容中,只有data-role="page"从第二页加载的标签.这很好,因为.on()绑定应该绑定到新元素,但事实并非如此.如果我专门刷新page2.php然后all.js文件工作,但是如果我使用changePage它不会.
为什么新元素不会从changePage绑定到all.js .on()选择器？
两个页面的HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<title>Title</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.2.0.min.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.2.0.min.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/pages/all.js"></script>
</head>
<body>
<div data-role="page" data-theme="d">
<div data-id="head" data-role="header" data-position="fixed" data-theme="b">
<h1>Name</h1>
<a href="#" id="headingsActionButton" class="ui-btn-right headingsActionButton hidden" data-role="button" data-inline="true" data-icon="check">Save</a>
</div>
<div id="mainContent" data-role="content">
{PageContent}
</div>
<div align="center" data-id="foot" data-role="footer" data-position="fixed" data-inset="false" data-theme="c">
Powered by
</div>
</div>
</body>
</html>
all.js
$(function() {
/**
* Prevent the header and footer from hiding on a non element tap.
*/
$("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: false });
/**
* Scroll to the top of the collapsible heading
*/
$('.ui-collapsible-heading').on('click', function(e) {
window.scrollTo(0, $(this).offset().top - $('[data-role=header]').height());
$('.headingsActionButton').addClass('hidden');
var attr = $(this).parent().attr('data-action-id');
if (typeof attr !== 'undefined' && attr !== false) {
if (!$(this).parent().hasClass('ui-collapsible-collapsed')) {
console.log('expanded');
$('.headingsActionButton').attr('data-action-id', $(this).parent().attr('data-action-id'));
$('.headingsActionButton .ui-btn-text').text($(this).parent().attr('data-action-text'));
$('.headingsActionButton').toggleClass('hidden');
} else {
console.log('collapsed');
}
}
});
});
.on不是简单的替换.live,你需要使用正确的语法.
$(context).on(events,targetelements,eventhandler)
例如,
$('#someparentelement').on('click','.ui-collapsible-heading',function(){...});
要直接匹配.live正在做的事情,请使用document代替'#someparentelement'
更新
问题的根源是JQM正在停止.ui-collapsible-heading上的click事件,这意味着它无法冒泡到文档.这使得处理事件的唯一方法是将其直接绑定在该元素上而不进行委托.
考虑到这一点,您需要它在每个页面上运行,因此您需要删除,$(function(){})因为它只在第一页上运行而是使用$(document).on("pageinit",function(){})