1. 程式人生 > >jquery mobile動態新增元素之後不能正確渲染解決方法說明

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

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";
});

相關推薦

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

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

jquery html 動態新增元素繫結事件

由於實際的需要,有時需要往網頁中動態的插入HTML內容,並在插入的節點中繫結事件處理函式。我們知道,用Javascript向HTML文件中 插入內容,有兩種方法, 一種是在寫HTML程式碼寫入JS,然後插入到文件中; 另外一種是通過ajax的方式,從伺服器獲取資料,然

Jquery mobile動態修改header後無法渲染樣式的問題解決

最近剛開始看JQuery Mobile, 發現介面確實做得很好,國外開源的東西做得都這麼好看。。哎。。。想到我們公司的產品介面。。俗話說 貨比貨得扔。 先介紹一下Jquery mobile,如果要直接看標題問題的話請直接跳到下面紅色Title部分。 jqm(jquery mo

jquerymobile動態新增元素之後樣式重新整理

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

jQuery Mobile中無法提交表單的解決方法

jquery mobile預設是使用ajax提交表單的,如果要像平常PHP一樣的流程接收引數,可以把AJAX禁用: 只在加上data-ajax="false"就可以了。 <form method="post" action="jqdemo.php" data-aja

js----動態新增元素 && jQuery----動態新增元素

1.js    ocument.getElementById('id').innerHTML=innerHtml; var creatLi = function(data){ var innerHtml = ""; for(var i

jQuery動態新增的新元素繫結點選事件

1.首先如何用jQuery動態新增a標籤: for (var index=0; index<5; index++){ var h = '<a>動態新增點選事件</a>

jQuery-為動態新增元素繫結事件(以及不重複新增新的內容)

在使用jQuery的方式為元素繫結事件時,我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的 $(selector).bind(event,d

jquery append 動態新增元素事件on 不起作用的解決方案

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=

jquery html動態新增元素繫結事件

在實際開發中會遇到要給動態生成的html元素繫結觸發事件的情況: <div id="testdiv">    <ul></ul> </div> 假設我們要給ul動態新增的<li>繫結click事件形成如下結果 &

Jquery動態新增元素繫結事件:live() delegate() on()

給已存在的元素繫結事件時可以直接寫: $(".class a").click(function(){ }) 但是對於動態生成並append()到頁面上的元素來說,就不能直接用上面的方法來繫結事件了。 在Jquery 1.7之前我們可以通過live()和delega

jquery 動態新增元素的事件

開發專案時候選擇框DropDownList的Change事件,有時候需要多級級聯從而動態生成Select元素,但是此時的Select元素的Change事件無法觸發,非常苦悶。在專案中採用了兩種方式,一種是重新聲稱元素的時候,把事件寫入到partial的view中,但是這種

jQuery EasyUI動態新增控制元件或者ajax載入頁面後不能自動渲染問題的解決方法

現象:        AJAX返回的html無法做到自動渲染為EasyUI的樣式.比如:class="easyui-layout" 等 處理方法:       在html片段載入完畢後使用 Js程式碼   $.parser.parse(context)        即可重新渲染。 實現

jquery動態新增元素無法提交解決方案

昨天寫了一個頁面,裡面涉及到動態的建立和修改表單控制元件(form controls),用到的修改新增元素的方式為jquery方法為append,和replaceWith方法,凡是原有的控制元件後臺都可以獲取到值,凡是動態改變的元素,都無法獲取值,這些控制元件當然都包含了na

關於 jquery html 動態新增元素繫結事件——On()

Ajax動態生成的資料,動作繫結需要重新執行1 $(document).on('click','.btn1',function(){}); 2 3 替換: 4 5 $('btn1').on('click') = function(){};JQuery On()定義和用法on() 方法在被選元素及子元素上新

JQuery實現動態新增的標籤元素的點選事件

這裡所說的動態新增的元素的意思是:用js新增的標籤元素先說一下我遇到的問題:想對一些資料實現分頁,就自己寫一個分頁功能。用的是bootstrap的分頁,在頁面獲取資料列表後,計算出需要分多少頁展示,然後

jquery動態新增元素無法觸發繫結的事件的解決方案。

  最近遇到一個問題,即當用jquery動態新增元素後,發現給動態新增的元素卻無法觸發事件。後來在網上查閱了一些資料,發現原來要這樣處理:   先上我出錯的程式碼:    <!DOCTY

【EasyUI】使用Jquery.load動態加載時重新渲染

() class .html query code 動態加載 元素 xhr app EasyUI重新渲染: $.parser.parse(‘#app‘); // 重新渲染 #app 下的元素 添加個擴展方法(方便使用): 1 $.fn.extend({ 2

Jquery通過append新元素之後事件繫結問題的解決方案:

1、 重複繫結 (DOM載入時,先對DOM中存在的元素進行事件繫結,每次新增的元素時,再對新增元素繫結一次事件) 2、 直接在標籤上新增onclick屬性 3、 事件委託 4、 如果元素是用click事件append進來的,那麼功能函式必須放在這個click事件裡面; 具體程式碼不表,

動態新增元素新增點選事件所遇到的坑

目的:有一個html,要達到的目的是:當滑鼠進入某一個 li 時,它自動為它新增一個class=“co“,然後再為這個co寫一個點選事件; <body>     <div id="aaa">