jquery mobile動(dòng)態(tài)添加元素之后不能正確渲染解決方法說明

更新時(shí)間：2014年03月05日 09:02:07 作者：

本篇文章主要是對(duì)jquery mobile動(dòng)態(tài)添加元素之后不能正確渲染解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

jquerymobile動(dòng)態(tài)添加元素之后有些不能被正確渲染的解決方法：
listview：添加 jq(".detail").listview("refresh");
div或其他：添加.trigger( "create" );
======================================================================

jqm在初始化頁面時(shí)會(huì)根據(jù)data-xxx在各元素中插入jqm的屬性和類等。在頁面初始化結(jié)束后，如果動(dòng)態(tài)的插入一個(gè)元素，往往顯示很丑陋，因?yàn)闆]有插入jqm的樣式。這個(gè)可以用瀏覽器里的開發(fā)工具來查看，會(huì)發(fā)現(xiàn)有些元素多了很多類，而動(dòng)態(tài)插入的元素代碼還是你寫的那樣子。

如果要使動(dòng)態(tài)插入的元素具有jqm的樣式，可以對(duì)jqm對(duì)象觸發(fā)create事件:

復(fù)制代碼代碼如下:

<span style="font-size:18px;"> $(selector).trigger('create');</span>

create事件適用范圍廣，甚至可以是不存在的元素(raw markup?)，比如要插入一個(gè)按鈕

復(fù)制代碼代碼如下:

$('<a data-role="button">dy button</a>').appendTo('#content').trigger('create');

有些對(duì)象提供了refresh 方法，如listview、flip toggle。與create的區(qū)別是refresh方法需要作用在已存在的對(duì)象上，如

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

不使用jqm樣式：

如果不希望jqm自動(dòng)初始化你的元素，有兩種方法。加入data-role="none"屬性，或者在mobileinit事件中對(duì)keepNative選項(xiàng)進(jìn)行配置

復(fù)制代碼代碼如下:

$(document).bind('mobileinit',function(){
 $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

您可能感興趣的文章:

相關(guān)文章

jqPlot jQuery繪圖插件的使用
jqPlot是一個(gè)灰常強(qiáng)大的圖表工具，曲線，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~
2016-06-06
jQuery實(shí)現(xiàn)彈幕效果
本文主要分享了jQuery實(shí)現(xiàn)彈幕效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
jquery解析json格式數(shù)據(jù)的方法(對(duì)象、字符串)
這篇文章主要介紹了jquery解析json格式數(shù)據(jù)的方法,包括針對(duì)json對(duì)象及json字符串的解析技巧,并附帶了完整的jQuery解析json數(shù)據(jù)示例,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery前臺(tái)控制ajax交互與后臺(tái)asp.net響應(yīng)處理的詳細(xì)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
jQuery 動(dòng)態(tài)云標(biāo)簽插件
這里推薦給大家一款jquery動(dòng)態(tài)云標(biāo)簽的插件，非常的炫，在指定塊級(jí)元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽，a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控，a標(biāo)簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標(biāo)懸浮停止動(dòng)畫且透明度最大，層數(shù)最高，鼠標(biāo)離開，恢復(fù)之前狀態(tài)
2014-11-11
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-12-12
jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
jQuery中insertBefore()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertBefore()方法用法,實(shí)例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個(gè)指定的元素集合前面的使用技巧,需要的朋友可以參考下
2015-01-01
jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
百度上有個(gè)很使用的功能，就是用戶在搜索的時(shí)候會(huì)自動(dòng)提示相關(guān)搜索條件以供選擇，非常人性化的設(shè)計(jì)，我們?nèi)绾螌⒋斯δ芊诺阶约旱捻?xiàng)目中呢，經(jīng)過一番研究，終于實(shí)現(xiàn)了此功能，分享給大家。
2014-11-11
jQuery中選擇器的基礎(chǔ)使用教程
jQuery的選擇器非常強(qiáng)大,使你可以輕松選取頁面中任何一個(gè)對(duì)象,下面我們就主要針對(duì)DOM操作來看一下jQuery中選擇器的基礎(chǔ)使用教程,需要的朋友可以參考下
2016-05-05