Question

我正在尝试升级到持续的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'），所以在下一页显示它可以重新绑定。

Answer 1

您应该能够使用$ .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);
        });

    });
});

如何使用on（）和off（）将事件附加到jquery移动页面？

1 个答案: