Question

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

未正确生成按钮，正在生成链接但不生成按钮本身。我错过了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>');

    });

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（如果存在）。

<强> Demo

感谢@omar出色的 comment

Answer 2

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

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

$("a").button();

如果你给它一个id或类来调用它以区别已经设置的那个，那会更容易。

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

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

动态附加链接按钮

2 个答案:

但是一个注意事项

感谢@omar出色的 comment