我正在尝试向 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>');
});
最佳答案
仅附加 a
标签无法解决您的问题,因为 jQuery mobile 会出于样式目的更改其结构。所以你必须.clone()
现有标签并更改其文本
。
$(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
关于jquery - 动态附加链接按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11545235/