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

除了上面@ patrick的回复之外，还需要在将按钮小部件附加到文档后初始化按钮小部件。试试这个，

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

Answer 2

根据jQuery mobile docs，需要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>');
  });
});

jQuery Mobile按钮无法按预期工作

2 个答案: