jquery .on（）不綁定到jquerymobile的新元素changePage

我有2頁使用相同的模板。唯一不同的是data-role="content"是不同的。我正在使用$.mobile.changePage('page2.php');，但我腦海中的all.js文件沒有綁定到在page2中加載的元素。jquery .on（）不綁定到jquerymobile的新元素changePage

腳本標記爲「all.js」是在兩個頁面的頭，從我已閱讀，只有data-role="page"從第二頁加載。這很好，因爲.on()綁定應該綁定到新元素，但事實並非如此。如果我特別刷新page2.php然後all.js文件工作，但如果我使用changePage它不會。

爲什麼不是從changePage綁定到all.js.on()選擇器拉入新元素？

HTML兩種頁面

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 

    <title>Title</title> 

    <link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.2.0.min.css"> 
    <link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.2.0.min.css"> 

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.min.js"></script> 
    <script type="text/javascript" src="js/pages/all.js"></script> 
</head> 

<body> 
<div data-role="page" data-theme="d"> 
    <div data-id="head" data-role="header" data-position="fixed" data-theme="b"> 
     <h1>Name</h1> 
     <a href="#" id="headingsActionButton" class="ui-btn-right headingsActionButton hidden" data-role="button" data-inline="true" data-icon="check">Save</a> 

    </div> 

    <div id="mainContent" data-role="content"> 
     {PageContent} 
    </div> 
    <div align="center" data-id="foot" data-role="footer" data-position="fixed" data-inset="false" data-theme="c"> 
     Powered by 
    </div> 
</div> 
</body> 
</html>

all.js

$(function() { 
    /** 
    * Prevent the header and footer from hiding on a non element tap. 
    */ 
    $("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: false }); 

    /** 
    * Scroll to the top of the collapsible heading 
    */ 
    $('.ui-collapsible-heading').on('click', function(e) { 
     window.scrollTo(0, $(this).offset().top - $('[data-role=header]').height()); 
     $('.headingsActionButton').addClass('hidden'); 
     var attr = $(this).parent().attr('data-action-id'); 
     if (typeof attr !== 'undefined' && attr !== false) { 
      if (!$(this).parent().hasClass('ui-collapsible-collapsed')) { 
       console.log('expanded'); 
       $('.headingsActionButton').attr('data-action-id', $(this).parent().attr('data-action-id')); 
       $('.headingsActionButton .ui-btn-text').text($(this).parent().attr('data-action-text')); 
       $('.headingsActionButton').toggleClass('hidden'); 
      } else { 
       console.log('collapsed'); 
      } 
     } 
    }); 


});

來源

2012-10-16 Bot

.on不是一個簡單的下降更換.live，你需要使用正確的語法。

$(context).on(events,targetelements,eventhandler)

例如，

$('#someparentelement').on('click','.ui-collapsible-heading',function(){...});

要直接匹配什麼.live在做，代替使用document'#someparentelement'

更新的

問題的根源是點擊事件在.ui-collapsible標題被JQM，meani停止它不能冒泡到文檔中。這就讓處理事件的唯一方法是直接綁定到沒有委派的元素上。

考慮到這一點，你需要它的每一頁上運行，所以你需要刪除$(function(){})，因爲它只能運行在第一頁，而使用$(document).on("pageinit",function(){})

來源

2012-10-16 18:00:30

我想這是'$（文件）。在（ '點擊'， '的.ui-可摺疊標題'）'和沒有工作。 – Bot

另請注意，如果我在changePage後手動刷新頁面，這可以工作。 – Bot

哦，同樣，刪除'$（function（）{'，在jQuery mobile中使用文檔並不是一個好主意，因爲它只在第一頁被調用，我不確定這對fixedToolbar意味着什麼代碼。 –

嘗試：

$('.ui-collapsible-heading').live('click', function(e) { ... });

「Live」的作品類似於「開啓」，但將事件設置爲新元素。

來源

2012-10-16 18:08:18 Nahuelistico

直播已棄用。 – Bot

jquery .on（）不綁定到jquerymobile的新元素changePage

回答

相關問題