javascript - 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>');
  });
});

上面的代码应该将列表视图更改为左侧带有加号图标的按钮列表。但是，它对我不起作用。已<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文档，需要一个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>');
  });
});