首頁 > web前端 > js教程 > jquery mobile動態新增元素之後無法正確渲染解決方法說明_jquery

jquery mobile動態新增元素之後無法正確渲染解決方法說明_jquery

WBOY
發布: 2016-05-16 16:57:00
原創
1283 人瀏覽過

jquerymobile動態新增元素之後有些無法正確渲染的解決方法:
listview:在添加jq(".detail").listview("refresh");
div或其他:新增.trigger( "create" );
===================================== =================================

jqm在初始化頁面時會根據data-xxx在各元素中插入jqm的屬性和類別等。在頁面初始化結束後,如果動態的插入一個元素,往往顯示很醜陋,因為沒有插入jqm的樣式。這個可以用瀏覽器裡的開發工具來查看,會發現有些元素多了很多類,而動態插入的元素程式碼還是你寫的那樣子。

如果要讓動態插入的元素具有jqm的樣式,可以對jqm物件觸發create事件:

複製程式碼 程式碼如下:

$(selector).trigger('create'); 

create事件適用範圍廣,甚至可以是不存在的元素(raw markup?),例如要插入一個按鈕
複製程式碼 程式碼如下:

$('dy button').appendTo('#content').trigger('create');

有些物件提供了refresh 方法,如listview、flip toggle。與create的區別是refresh方法需要作用在已存在的物件上,如

$('ul').listview('refresh'),而且refresh只會去更新新加入的元素,如listview裡最新append的元素會更新,原有的保持不變。 (不知有沒理解錯,有些沒測試。原文http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

不使用jqm樣式:

如果不希望jqm自動初始化你的元素,有兩種方法。加入data-role="none"屬性,或在mobileinit事件中對keepNative選項進行設定

複製程式碼 程式碼如下:

$(document).bind('mobileinit',function(){
 $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板