jQuery Mobile按鈕按預期工作

Question

<ul data-role="listview"> 
    <li>Facebook</li> 
    <li>Google</li> 
    <li>Apple</li> 
</ul> 

$(document).bind('pagebeforecreate',function(){ 
    $('form ul li').each(function(){ 
    $(this).html('<a role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>'); 
    }); 
}); 

上面的代碼應該將listview更改爲一個帶有左側加號圖標的按鈕列表。但是，它不適合我。正在插入<a...></a>，但該圖標未正確顯示。此默認圖標仍在顯示。我怎樣才能解決這個問題？

Answer 1

根據jQuery mobile docs a data-role="button"屬性需要將任何錨點鏈接設置爲按鈕樣式。

在你的代碼有：

<a role="button" 

這是不正確。 您需要將此更改爲：

<a data-role="button" 

所以你的整個代碼現在將是：

<ul data-role="listview"> 
    <li>Facebook</li> 
    <li>Google</li> 
    <li>Apple</li> 
</ul> 

$(document).bind('pagebeforecreate',function(){ 
    $('form ul li').each(function(){ 
    $(this).html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$(this).text()+'</a>'); 
    }); 
}); 

Answer 2

除了上面@帕特里克的答覆，你還需要將其連接到後初始化按鈕控件該文件。試試這個，

$(document).bind('pageshow',function(){ 
    $('ul li').each(function(){ 
    var $this = $(this); 
    $this.html('<a data-role="button" data-icon="plus" data-iconpos="left">'+$this.text()+'</a>'); 
    var $btn = $('a', $this); 
    $btn.button(); 
    }); 
});