2013-02-08 22 views
1

我正在使用帶有phonegap的jQuery mobile來創建iPhone應用程序。我在URL中傳遞動態標識以從數據庫獲取數據,並在頁面加載時填充頁面上的字段。live'pagecreate'多次調用jquery mobile中使用URL參數的動態頁面

$.mobile.changePage("child-form-page.html?id=1"); 

它工作第一次罰款和數據卷DIV ID直播功能得到所謂

$('#childForm').live('pagecreate',function(event){ 
    //Fetch data and fill fields based on ID i get in url 
}); 

但是,當我提交表單,並使用相同的頁面$.mobile.changePage("child-form-page.html?id=2");移動到下一個形式是觸發$('#childForm').live功能兩次,數據丟失。

+0

我在下面的回答中爲您提供了一個解決方案,如果您需要更多幫助,請通過我的電子郵件與我聯繫。 – Gajotres 2013-02-09 16:33:30

回答

1

因爲你沒有爲我們提供更多的代碼,我只能爲您提供一個補丁你的問題。 jQuery Mobiles的工作性質會在綁定事件時導致一些問題。 jQuery事件綁定沒有檢查將阻止多個事件(相同的事件,例如點擊事件)綁定到單個元素。

這可以通過很少的方式來預防,我會爲你列舉所有這些,但我認爲你的問題與多事件綁定無關,因爲不像jQuery jQuery Mobile頁面事件綁定會阻止多重綁定,在這種情況下,你將在我的答案底部找到您的解決方案。

解決方案1:

將其綁定你之前刪除事件:

$('#index').live('pagebeforeshow',function(e,data){  
    $('#test-button').die().live('click', function(e) { 
     alert('Button click'); 
    });  
}); 

如果你有綁定到對象不同的事件:

$('#index').live('pagebeforeshow',function(e,data){  
    $('#test-button').die('click').live('click', function(e) { 
     alert('Button click'); 
    });  
}); 

解決方案2:

使用jQuery的過濾器選擇,就像這樣:

$('#carousel div:Event(!click)').each(function(){ 
    //If click is not bind to #carousel div do something 
}); 

由於事件過濾器是不是官方的jQuery框架的一部分,它可以在這裏找到:http://www.codenothing.com/archives/2009/event-filter/

簡而言之,如果速度是你的主要關注那麼解決方法2是更好的解決方案,然後1

解決方案3:

一個新的,可能是一個最簡單的這一切。

$(document).on('pagebeforeshow', '#page', function(event){ 
    if(event.handled !== true) // This will prevent event triggering more then once 
    { 
     // Some code 
     event.handled = true; 
    } 
    return false;     
}); 

TNX到sholsinger此解決方案:http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

pageChange事件怪癖 - 觸發兩次

有時pagechange事件可以觸發兩次,它沒有任何與前面提到的問題。

pagebeforechange事件發生兩次的原因是由於changePage中的遞歸調用,當toPage不是jQuery增強的DOM對象時。這種遞歸是危險的,因爲開發者被允許在事件中改變toPage。如果開發人員在pagebeforechange事件處理程序中始終將toPage設置爲字符串,則無論該對象是否爲對象,都將導致無限遞歸循環。頁面加載事件將新頁面作爲數據對象的頁面屬性傳遞(應將其添加到文檔中,但目前未列出)。 pageload事件因此可以用來訪問加載的頁面。

這幾句話是因爲您通過pageChange發送附加參數而發生的。

例子:

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a> 

要解決此問題,使用本章Page events transition order列出的任何頁面事件(這是關於jQuery Mobile的頁面事件綁定我的其他答案/條)。

+0

真的很有幫助,謝謝你的回答:) – 2013-02-11 12:08:37

0

如果您執行DOM操作(例如通過pagecreate處理程序中的jQuery),您可能會無意中觸發此類行爲。

<div data-role="page" id="somePage"> 
    <div id="elem"/> 
</div> 

而且處理程序:

$('#somePage').on("pagecreate", function() {  
    var table = $('<table></table>').addClass('t');              
    $('#elem').append(table); 
}); 

由於該elem DIV沒有被定義爲<div id="elem"></div>的事實,但<div id="elem"/>,這帶來了麻煩。

因此,它可能與您想要傳遞的動態ID無關。

相關問題