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

问题描述

我正在尝试升级到持续的Jquery 1.7.1（使用JQM 1.1pre）。

我以前能够绑定到这样的JQM页面：

  $（'＃mypage'）。live（'pageshow'，function（）{/ * do stuff * /} ）
  

每个Jquery 1.7.1现在必须是：

  $（'＃mypage'）。on（'pageshow'，function（）{/ * do stuff * /}）
  

或者如果页面动态插入

问题：

- 这个语法是否正确jquery 1.7+？

- 我无法获取事件在JQM中使用这个来开火。我尝试过 $（'div：jqmData（role =page）＃mypage ，但这似乎也不起作用。感谢您的帮助！

编辑： b有些介入后，似乎只能调用on（）和off（）on $（'div：jqmData（role =page）'）。调用相应的 #pageID 不起作用在一个多页面布局中，这样一来每一页就会触发一次，所以如果你的多页文档中有10页，那这个：

  $（'div：jqmData（role =page）'）。on（'pageshow'，function（）{
 // do stuff 
}）; 
  

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

猜测这将在JQM发布之前被JQM所接受，同时我将此作为解决方法，以确保只附加一次。

  $（'DIV：jqmData （role =page）'）。on（'pageshow'，function（）{
 console.log（one）; 
 
 if（$（'。element'）。length> 0&& $（'。element'）jqmData（'bound'）！= true）{
 $ （ '.element '）jqmData（' 约束'，TRUE）; 
 $（'。element'）。on（'click'，function（）{/ * button click handler * /}）; 
} 
}）; 
  

我正在检查长度，以便代码只在 .element 在相应的页面上，是否还没有被约束。你也可以在pagebeforehide上使用它来关闭（） .element 。只需不要忘记重置jqmData（'bound'），所以在下一个页面上可以重新绑定。

解决方案

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

我为所有页面添加了一个pageinit / pageshow处理程序（以显示该页面每页每次触发一次，并且每次显示页面显示时都会显示页面显示）。然后，我为＃page1创建一个pageinit处理程序来绑定按钮上的一个点击事件处理程序。

注意语法。 $（元素）。on（' events '，' 选择器 >）vs $（元素）。on（' events '， handler ）;

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

  $（function（）{
 //为所有页面设置init / show处理程序
 var selector ='：jqmData（role = page）'; 
 $（'body'）
 .on（'pageinit'，selector，function（e，data）{
 //初始化页
 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）{
 //设置处理程序
 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）; 
}）; 
 
}）; 
}）; 
  

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

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

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

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 */ })

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?

Thanks for help!

EDIT:
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
   });

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

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 */ });  
     }
   });

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.

解决方案

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/

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.

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屋！