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