如何使用on（）和off（）將事件附加到jquery移動頁面？

Question

我想升級到持久Jquery 1.7.1（使用JQM 1.1pre）。

我曾經是能夠綁定到一個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（角色=‘頁面’）＃我的空間但這也似乎不工作，什麼是正確的語法一些功能附加到特定JQM頁面只

？感謝您的幫助

編輯：
一些干預後，似乎你只能在$致電（）和關閉（）（「DIV：jqmData（角色=‘頁面’）」）。調用上分別爲＃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上使用此功能關閉（）。元素。只是不要忘記重置jqmData（'bound'），所以在下一個頁面顯示時可以重新綁定它。

Answer 1

您應該可以使用$ .on（）綁定到所有頁面以及特定頁面。我在這裏創建了一個示例http://jsfiddle.net/kiliman/aAanV/

我爲所有頁面添加了pageinit/pageshow處理程序（以顯示pageinit每頁觸發一次，並且每次顯示頁面時都會觸發pageshow）。然後，我爲＃page1創建一個pageinit處理程序，以在按鈕上綁定單擊事件處理程序。

注意語法。 $（元素）。在（ '事件'， '選擇'，處理器）VS $（元素）。（'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); 
     }); 

    }); 
});