jQuery Mobile在初始化頁面后添加內容時出現問題
[英]jQuery Mobile rendering problems with content being added after the page is initialized
問題描述
我正在使用jQuery Mobile和Backbone JS進行項目。 它主要是工作，使用jQuery Mobile的事件'pagebeforeshow'來觸發正確的Backbone View。 在該特定jQuery Mobile頁面的Backbone View中，它正在執行所需的所有動態操作。 視圖中的一些功能是使用Underscore的模板系統提取某些位。
這一切都很棒，直到我使用模板系統拉出表格。 例如，一組動態單選按鈕（從Backbone Collection生成）。 這些單選按鈕我希望使用jQuery Mobile提供的樣式。 目前，jQuery Mobile沒有采用這些動態注入的單選按鈕。 我之前通過再次調用jQuery Mobile小部件“slider（）”方法來執行滑塊時解決了這個問題，它似乎刷新了它們......這似乎不是這些單選按鈕的情況。
在Backbone View中，我嘗試再次調用widget方法：
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
我也嘗試了相反的方式，但似乎我需要這樣做才能使分組樣式工作等等。但這似乎並不合適！ ...當我點擊單選按鈕時，這樣做也會導致錯誤，說：“在初始化之前無法在checkboxradio上調用方法;嘗試調用方法'刷新'”？
似乎應該有一種方法在jQuery Mobile中重新初始化頁面或什么？！ 我注意到源代碼中有一個“頁面”小部件。
在頁面制作完成后，jQuery Mobile如何處理注入DOM的表單/元素？ 是否有一種干凈的方式來處理它如何構成表格？ 必須有一種干凈的方式來調用表單來呈現“jQuery Mobile方式”而不依賴於基本HTML中的數據屬性標記？
任何幫助或洞察這個問題將不勝感激...我非常喜歡嘗試讓Backbone JS和jQuery Mobile很好地協同工作。
非常感謝，詹姆斯
11 個解決方案
解決方案1
19 已采納 2011-04-14 07:53:15
更新
從jQueryMobile beta2開始就有一個事件要做。 .trigger('create')在一個元素上，使其中的所有內容都被正確繪制。
另一個問題不是重復，但需要我發布10次以上的答案:)
[舊答案]
試試.page()
我的常見問題解答中的更多細節： http ： //jquerymobiledictionary.pl/faq.html
解決方案2
5 2011-04-14 11:55:50
我不確定這是否有幫助但是在添加動態元素時我在成功ajax調用本身（例如這里和這里 ）中使用.page（）但我發現它沒有按預期工作。 我發現在ajax調用中最好刷新元素（如果它是表單元素）以使用這些記錄的方法 ：
復選框：
$("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");
並且要添加非表單元素，請使用.page（）
解決方案3
5 2011-07-20 17:28:21
刷新整個頁面對我有用：
$('#pageId').page('destroy').page();
解決方案4
2 2012-05-23 12:10:32
嘗試使用新內容在元素上調用.trigger（“create”）。
解決方案5
2 2011-07-23 23:18:47
JQuery Mobile現在支持.trigger（“create”）; 這將為你解決這個問題
解決方案6
1 2013-08-19 08:36:44
當我在封閉的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');
解決方案7
1 2011-07-19 20:19:26
我需要一種在初始化后動態刷新JQM頁面的方法。 我發現如果在“pagehide”事件期間刪除了數據屬性“page”，則下次顯示JQM頁面時會重新初始化它。
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});
解決方案8
1 2011-08-27 00:20:01
$('#pageId').page('destroy').page();
適用於生成的整個控制組，更不用說無線電輸入子項了。
-麥克風
解決方案9
0 2013-02-11 14:55:09
我有點偏離主題。 我希望能夠阻止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;
});
到目前為止，Backbone和JQM一直運作良好。
解決方案10
0 2015-03-02 08:41:45
嘗試使用enhanceWithin（）方法。 這應該是使用jQuery Mobile時任何jQuery對象的方法。
解決方案11
0 2011-09-03 07:18:26
對我來說只有.page()工作（沒有.page('destroy') ）。
例如：
$('my-control-group-id').page();
阿姆農
標簽中的jQuery Mobile listview和呈現問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.