如何使用on（）和off（）将事件附加到jquery移动页面？
我正在尝试升级到持续的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+是否正确？
– 我无法使用此function在JQM中触发事件。 我试过$（’div：jqmData（role =“page”）#mypage但这似乎也不起作用。将某些function附加到特定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', selector, function(e, data) { // showpage var $page = $(this); alert('show ' + $page.attr('id')); }); // setup init handler for page1 $('#page1').on('pageinit', function(e, 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); }); }); });