我正在尝试升级到持续的Jquery 1.7.1(使用JQM 1.1pre).
我曾经能够绑定到这样的JQM页面：
$('#mypage').live('pageshow',function() { /* do stuff */ })
Per Jquery 1.7.1现在必须是：
$('#mypage').on('pageshow',function() { /* do stuff */ })
或者如果页面是动态插入的
$('body').on('pageshow','#mypage',function() { /* do stuff */ })
问题：
– 这种语法对于jquery 1.7是否正确？
– 我无法使用此功能在JQM中触发事件.我试过$(‘div：jqmData(role =“page”)#mypage但这似乎也不起作用.将某些功能附加到特定JQM页面的正确语法是什么？
感谢帮助！
编辑：
有些干涉后来似乎你只能在$(‘div：jqmData(role =“page”)’)上调用on()和off().调用相应的#pageID不起作用.在多页面布局中,这样的绑定每页将触发一次,因此如果多页文档中有10个页面,则：
$('div:jqmData(role="page")').on('pageshow',function() {
// do stuff
});
将在多页文档中每次触发10次或一次.
我想在1.1发布之前,JQM会对此进行解决.与此同时,我将此作为一种解决方法,以确保只附加一次.
$('div:jqmData(role="page")').on('pageshow',function() {
console.log("one");
if ( $('.element').length > 0 && $('.element').jqmData('bound') != true) {
$('.element').jqmData('bound',true);
$('.element').on('click',function() { /* button click handler */ });
}
});
我正在检查长度,所以只有.element在相应页面上并且是否已经绑定时,代码才会运行.你也可以在pagebeforehide上使用它来关闭().element.只是不要忘记重置jqmData(‘bound’),所以在下一页显示它可以重新绑定.
解决方法
您应该能够使用$.on()绑定到所有页面以及特定页面.我在这里创建了一个样本
http://jsfiddle.net/kiliman/aAanV/
我已经为所有页面添加了一个pageinit / pageshow处理程序(以显示pageinit每页触发一次,每次页面显示时都会触发pageshow).然后,我为#page1创建一个pageinit处理程序,以便在按钮上绑定click事件处理程序.
注意语法. $(elements).on(‘events’,’selector’,handler)vs $(elements).on(‘events’,handler);
如果包含选择器,则将处理程序委派给与选择器匹配的所有元素.如果你不包括选择器,那么你绑定处理程序
直接到元素.
$(function() {
// setup init/show handler for ALL pages
var selector = ':jqmData(role=page)';
$('body')
.on('pageinit',selector,function(e,data) {
// initialize page
var $page = $(this);
alert('init ' + $page.attr('id'));
})
.on('pageshow',data) {
// showpage
var $page = $(this);
alert('show ' + $page.attr('id'));
});
// setup init handler for page1
$('#page1').on('pageinit',data) {
// setup handler
var $page = $(this);
$page.find('.colorchanger').click(function() {
var $content = $page.find('.ui-content'),isBodyC = $content.hasClass('ui-body-c');
$content
.toggleClass('ui-body-c',!isBodyC)
.toggleClass('ui-body-e',isBodyC);
});
});
});
