如何使用 on() 和 off() 将事件附加到 jQuery 移动页面? [英] How to attach a event to a jQuery mobile page using on() and off()?

问题描述

我正在尝试升级到持续的 Jquery 1.7.1(使用 JQM 1.1pre).

I'm trying to upgrade to lasted Jquery 1.7.1 (using JQM 1.1pre).

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

I used to be able to bind to a JQM page like this:

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

根据 Jquery 1.7.1，现在必须是:

Per Jquery 1.7.1 this would now have to be:

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

或者如果页面是动态插入的

Or if the page is dynamically inserted

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

问题:
- 这个语法对于 jquery 1.7+ 是否正确?
- 我无法使用它在 JQM 中完全触发事件.我试过 $('div:jqmData(role="page")#mypage 但这似乎也不起作用.将某些功能附加到特定 JQM 页面的正确语法是什么??

Questions:
- Is this syntax correct for jquery 1.7+?
- I cannot get the events to fire at all in JQM using this. I have tried $('div:jqmData(role="page")#mypage but this also does not seem to work. What would be the correct syntax to attach some functionality to a specific JQM page only?

感谢您的帮助！

后来有些干预似乎你只能在 $('div:jqmData(role="page")')<上调用 on() 和 off().调用相应的 #pageID 不起作用.在像这样的多页布局绑定中，每页都会触发一次，因此如果您的多页文档中有 10 页，则:

Some meddling later it seems you can only call on() and off() on $('div:jqmData(role="page")'). Calling on a respective #pageID does not work. In a multipage layout binding like this will fire once per page, so if you have 10 pages in your multipage document, this:

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

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

will fire 10 times or once per page in a multipage document.

我想这会在 1.1 发布之前由 JQM 解决.同时，我将其用作一种解决方法，以确保只附加一次内容.

I guess this will be adressed by JQM before 1.1 will be released. In the meantime, I use this as a sort-of-workaround to make sure stuff is only attached once.

$('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 上 off() .element .只是不要忘记重置jqmData('bound')，以便在下一页显示它可以重新绑定.

I'm checking for length so the code only runs if .element is on the respective page and whether it hasn't been bound already. You can also use this to off() .element on pagebeforehide. Just don't forget to reset jqmData('bound'), so on the next pageshow it can be re-bound.

推荐答案

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

You should be able to use $.on() to bind to all pages, as well as specific pages. I've created a sample here http://jsfiddle.net/kiliman/aAanV/

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

I've added a pageinit/pageshow handler for ALL pages (to show that pageinit fires once per page, and pageshow fires each time page is shown). I then create a pageinit handler for #page1 to bind a click event handler on a button.

注意语法.$(elements).on('events', 'selector', handler) vs $(elements).on('events', handler);

Notice the syntax. $(elements).on('events', 'selector', handler) vs $(elements).on('events', handler);

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

If you include the selector, then you are delegating the handler to all elements that match the selector. If you DON'T include the selector, then you are binding the handler directly to the elements.

$(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 移动页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！