jquery mobile動態添加元素之後不能正確渲染解決方案說明

來源:互聯網
上載者:User

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

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

如果要使動態插入的元素具有jqm的樣式,可以對jqm對象觸發create事件:
複製代碼 代碼如下:
<span style="font-size:18px;"> $(selector).trigger('create');</span> 

create事件適用範圍廣,甚至可以是 不存在的元素(raw markup?),比如要插入一個按鈕
複製代碼 代碼如下:
$('<a data-role="button">dy button</a>').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";
});

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.