[英]JQuery Mobile not refreshing button styles
當我嘗試使用如下代碼在 JQuery 中創建元素時:
$('#grid').append('<div id="gridElement'+counter+'" class="ui-block-'+rowLetter(counter)+'"></div>');
$('#gridElement'+counter).append('<div id="gridContent'+counter+'" data-inline="true"></div>');
$('#gridContent'+counter).append('<a id="button'+counter+'" href="#" data-role="button"></a>');
$('#button'+counter).html('someButtonText');
元素已正確添加,但未執行 JQuery Mobile 樣式。 這是有道理的,我知道該庫在加載后立即對 DOM 執行一些操作,但我無法找到一種方法來根據命令實現這一點。 顯然我需要指示 JQuery Mobile 庫重建頁面,但對於我的生活,我一般找不到任何東西可以做到這一點。 我設法找到了幾篇關於這是選擇框和列表問題的帖子,但一般來說,頁面、網格或按鈕沒有任何內容。 到目前為止,這甚至可能嗎? 它仍處於 alpha 階段,因此可能不是。
您可以這樣做,而不是刷新整個div
頁面:
data-role=collapsible
使用collapsible()
函數data-role=button
使用button()
函數例子:
$('#bank_content div[data-role=collapsible]').collapsible();
$('#garden_content a[data-role=button]').button();
這是在我的情況下有效的方法:
我有一個包含不同元素的列表視圖,每個元素都有一個 data-role="controlgroup" ,其中包含拆分按鈕:
<ul id="my-list" data-role="listview" data-split-theme="a">
<li class="list-element">
<div class="listview-buttons" data-role="controlgroup" data-type="horizontal" >
<a href="#" data-role="button" data-icon="delete" data-iconpos="top">REMOVE</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="top">SELECT</a>
</div>
</li>
<li class="list-element">
<div class="listview-buttons" data-role="controlgroup" data-type="horizontal" >
<a href="#" data-role="button" data-icon="delete" data-iconpos="top">REMOVE</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="top">SELECT</a>
</div>
</li>
</ul>
在使用 javascript 動態添加另一個列表元素(包括新的拆分按鈕)后,我需要刷新列表、控制組和按鈕,如下所示:
$('#my-list').listview('refresh'); //refresh listview first
$('.listview-buttons').children('a').buttonMarkup(); //refresh the buttons
$('.listview-buttons').controlgroup('refresh'); // then refresh the controlgroup
希望對你也有幫助。
如果您嘗試刷新控制組,我想補充一下。 這對我有用。
.buttonMarkup()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.