jquery - 动态附加链接按钮

Question

我正在尝试将链接按钮添加到 jquery 移动页面：

http://jsfiddle.net/8JXTT/1/

按钮未正确生成，正在生成链接，但未生成按钮本身。我错过了一个CSS类吗？

代码 ：

<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

<div data-role="content" id="links">
        <a href="#secondpage" data-role="button">Link button</a>
</div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>

</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>
​$(document).ready(function() {

$('#links').append('<a href="#secondpage" data-role="button" data-theme="c">Link Button</a>');

    }); 

​</p>

Answer 1

仅附加a标签不会解决您的问题，因为 jQuery mobile 会更改其结构以进行样式设置。因此，您必须.clone()更改现有标签并更改其text.

$(document).ready(function() {
    var linkButton = $('#links a').clone(true);
    linkButton.find('span.ui-btn-text').text('Link Button2');
    $('#links').append(linkButton);
});

但是一个注释

正如上面的代码正在克隆一个现有的a标签，如果你a有id，那么id就会发生重复。所以将其更改id为class（如果存在）。

演示

感谢@omar的精彩评论

Answer 2

你必须实例化它。另一个按钮在页面加载后被实例化。然后你正在添加另一个链接。

添加链接后，您需要在该链接上调用函数：

$("a").button();

如果你给它一个 id 或 class 来调用它来区分它已经设置的那些会更容易。

编辑：实例化可能是错误的术语。您只需要调用该函数即可将样式应用于该新链接：

$(document).ready(function() {
    $('#links').append('<a href="#secondpage" data-role="button" data-theme="a">Link Button</a>');
    $('a[data-role=button]').button();
});​