jQuery Mobile呈現頁面初始化後添加內容的問題

我正在爲項目使用jQuery Mobile和Backbone JS。這主要是工作，使用jQuery Mobile的事件'pagebeforeshow'來觸發正確的骨幹視圖。在特定的jQuery Mobile頁面的Backbone View中，這就是它在做所有需要的動態事物的地方。視圖所做的一些事情是使用Underscore的模板系統吸引特定的位。jQuery Mobile呈現頁面初始化後添加內容的問題

這一切都很棒，直到我使用模板系統拉動表單位。例如，一組動態單選按鈕（由Backbone Collection生成）。這些單選按鈕我想使用jQuery Mobile提供的功能進行設計。目前，jQuery Mobile沒有采用這些動態注入的單選按鈕。我之前通過再次調用jQuery Mobile小部件「slider（）」方法執行滑塊時解決了此問題，並且它似乎刷新了它們......這似乎並不適用於這些單選按鈕。

中的骨幹視圖，我試圖再次調用控件的方法：

$(this.el).find("input[type='radio']").checkboxradio(); 
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();

我嘗試過其他的方式太繞，但它似乎我需要做的是這樣的分組造型工作等但這看起來不正確！ ...當我單擊單選按鈕時，這樣做也會導致錯誤，並說：「在初始化之前無法在checkboxradio上調用方法;試圖調用方法'refresh'」？

似乎應該有一種方法在jQuery Mobile中重新初始化頁面或其他東西？我注意到源代碼中有一個'頁面'小部件。

jQuery Mobile如何處理在頁面生成後被注入到DOM中的表單/元素？處理它如何構成表單有沒有一種乾淨的方式？必須有一種乾淨的方式來調用表單來呈現「jQuery Mobile方式」，而不僅僅依賴基本HTML中的數據屬性標記？

任何幫助或深入瞭解這個問題將不勝感激...我非常想嘗試讓Backbone JS和jQuery Mobile良好地協作。

非常感謝，詹姆斯

來源

2011-04-13 littlejim84

更新

由於jQueryMobileβ2有做這個的事件。 .trigger('create')上的一個元素可以使其內部的所有內容都被正確地繪製。

的另一個問題，是不是重複，而是需要一個answet我貼過10次:)

[老答案]

嘗試在我的常見問題.page()

來源

2011-04-14 07:53:15 naugtur

謝謝。我遵循你的話。在這種特殊情況下，我不得不使用$（element）.page（「destroy」）。page（）出於某種原因？但即使這樣也不行。它正確地呈現了內容，但它不正確。獲得相同的錯誤：「在初始化之前無法在checkboxradio上調用方法;嘗試調用方法'refresh'」......奇怪。 – littlejim84 2011-04-14 10:28:56

'.page'可以在元素上調用一次。你必須圍繞你動態添加的內容創建一個包裝div。 – naugtur 2011-04-14 11:04:22

呃，那是stoopid。所以如果我有一個100％的Ajax頁面，我想重新加載我的選項，我必須每次創建一個包裝元素！必須是更好的方法。 – 2011-06-06 23:52:27

我不確定這是否有幫助，但添加動態元素時，我在成功ajax調用本身中使用.page（）（例如here和here），但我發現它沒有按預期工作。我發現，在Ajax調用它更好地刷新元素（如果它是一個表單元素）使用these documented methods：

複選框：

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

收音機：

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

選擇：

var myselect = $("select#foo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh");

滑塊：

$("input[type=range]").val(60).slider("refresh");

翻轉開關（它們使用滑塊）：

var myswitch = $("select#bar"); 
myswitch[0].selectedIndex = 1; 
myswitch .slider("refresh");

和用於添加非表格元件使用。第（）

來源

2011-04-14 11:55:50

我需要一種在初始化之後動態刷新JQM頁面的方法。我發現，如果我在「頁面隱藏」事件中刪除了數據屬性「頁面」，則下一次顯示JQM頁面時會重新初始化它。

$('#testing').live('pagehide', function (e) { 
    $.removeData(e.target, 'page'); 
});

來源

2011-07-19 20:19:26

不錯的把戲。我希望這是不存在的，因爲創建事件存在，但仍然很高興知道在數據中有'頁面'鍵 – naugtur 2012-10-13 08:42:31

刷新整個頁面爲我工作：

$('#pageId').page('destroy').page();

來源

2011-07-20 17:28:21

該解決方案與JQMbeta2不同。請刪除。 – naugtur 2012-10-13 08:37:57

jQuery Mobile的現在支持.trigger（「創建」）;這將爲您解決這個問題

來源

2011-07-23 23:18:47

$('#pageId').page('destroy').page();

適用於生成的整個控制組，更不用說無線電輸入子節點。

-Mike

來源

2011-08-27 00:20:01

此答案自JQMbeta2以來不正確。請刪除 – naugtur 2012-10-13 08:39:52

對我來說只有.page()工作（不.page('destroy')）。

例如爲：

$('my-control-group-id').page();

阿姆農

來源

2011-09-03 07:18:26 amnonkhen

自JQMbeta2以來，此解決方案不正確。請刪除。 – naugtur 2012-10-13 08:41:16

嘗試用新的內容元素上調用.trigger（「創建」）。

來源

2012-05-23 12:10:32

爲我工作，謝謝！ – 2013-03-18 13:24:44

我有點偏離主題。無論如何，我希望能夠阻止jqm在init中創建第一個默認頁面div作爲div中的骨幹網元素。我想動態插入頁面到DOM，然後調用jqm創建它的類和小部件。我終於做了這個是這樣的：

<head> 
<script src="jquery-1.8.3.js"></script> 
<script type='javascript'> 
$(document).on("mobileinit", function() { 
$.mobile.autoInitializePage = false;  
} 
</script> 
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script> 
</head> 
<body> 
....... dynamically add your content .......... 

<script type='javascript'> 
$.mobile.initializePage() 
</script> 
</body>

和我的洞JQM的配置（您jqm.js前放）

$(document).on("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
    $.mobile.hashListeningEnabled = false; 
    $.mobile.pushStateEnabled = false; 
    $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin 
    $.mobile.changePage.defaults.changeHash = false; 

    $.mobile.defaultDialogTransition = "none"; 
    $.mobile.defaultPageTransition = "slidedown"; 
    $.mobile.page.prototype.options.degradeInputs.date = true; 
    $.mobile.page.prototype.options.domCache = false; 
    $.mobile.autoInitializePage = false; 

    $.mobile.ignoreContentEnabled=true; 
});

到目前爲止骨幹和JQM一直工作正常。

來源

2013-02-11 14:55:09 zzart

當我在封閉div元素上調用.trigger（'create'）時，它對我有用。見下面的例子：

在HTML文件：

<div id="status-list" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
     <legend>Choose as many snacks as you'd like:</legend> 
      <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/> 
      <label for="checkbox-1a">Cheetos</label> 
    </fieldset> 
</div>

在js文件：

$("#status-list").trigger('create');

來源

2013-08-19 08:36:44 bitestar

嘗試使用enhanceWithin（）方法。這應該是使用jQuery Mobile時任何jQuery對象的方法。

來源

2015-03-02 08:41:45 Andree

jQuery Mobile呈現頁面初始化後添加內容的問題

回答

相關問題