jquery - 如何使用 on() 和 off() 将事件附加到 jQuery 移动页面？

Question

我正在尝试升级到最新的 Jquery 1.7.1(使用 JQM 1.1pre)。

我曾经能够像这样绑定(bind)到 JQM 页面:

$('#mypage').live('pageshow', function() { /* do stuff */ })

根据 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 不起作用。在这样的多页布局绑定(bind)中，每页都会触发一次，因此如果您的多页文档中有 10 页，则:

$('div:jqmData(role="page")').on('pageshow', function() {
   // do stuff
   });

将触发 10 次或在多页文档中每页触发一次。

我想 JQM 将在 1.1 发布之前解决这个问题。与此同时，我用它作为一种解决方法，以确保内容只附加一次。

$('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 位于相应页面上并且是否尚未绑定(bind)时运行。您还可以使用它来 off() .element on pagebeforehide。只是不要忘记重置jqmData('bound')，以便在下一页显示它可以重新绑定(bind)。

Answer 1

您应该能够使用 $.on() 绑定(bind)到所有页面以及特定页面。我在这里创建了一个示例 http://jsfiddle.net/kiliman/aAanV/

我为所有页面添加了 pageinit/pageshow 处理程序(以显示 pageinit 每页触发一次，而 pageshow 在每次显示页面时触发)。然后，我为 #page1 创建一个 pageinit 处理程序，以在按钮上绑定(bind)单击事件处理程序。

注意语法。 $(元素).on('事件', '选择器', 处理程序>) vs $(元素).on('事件', 处理程序);

如果您包含选择器，那么您将委托(delegate)处理程序给与选择器匹配的所有元素。如果您不包含选择器，那么您将绑定(bind)处理程序直接到元素。

$(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);
        });

    });
});