javascript - 当按钮附加到标题时图标不会改变

Question

我在标题上附加了一个按钮，唯一显示的图标是加号，其他任何东西都不起作用？

JavaScript

$('#addbuttons').append('<a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gears" data-theme="b">Edit</a>');
$('#addbuttons').append('<a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog">New Event</a>');

HTML

    <div data-role="header">
    <h1 class="ui-title" role="heading" id="hdr"></h1>
    <div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
    </div>

Answer 1

您需要告诉代码有一个新按钮，它不会神奇地接受更改。

$('#addbuttons')
    .append('<a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog">New Event</a>')
    .find("a")
        .button()
        .button('refresh'); //<- probably not needed, put it here just in case. 

Answer 2

在将按钮附加到如下之后，您可以尝试在您trigger的上添加：createdata-role=pageaddbuttons

$("[data-role=page]").trigger("create");

这是一个演示：http://jsfiddle.net/hungerpain/W7NcY/

您也可以尝试button像这样再次启动：

$("[data-role=button]").button();

但你最终会失去你的圆角。我注意到添加corners : true内部按钮 init 没有帮助。

演示：http://jsfiddle.net/hungerpain/W7NcY/4/

希望这可以帮助。