在这个 jsFiddle 示例中...
...我正在尝试在页面加载后在 div 中添加 jQuery Mobile 样式的按钮。页面加载时出现在页面上的大按钮看起来很棒......但是当我尝试“动态”添加另一个外观相似的按钮(通过单击“添加另一个按钮”)时,它不会被设置为它应该是(即使我通过 jQuery 为按钮“附加”正确的 HTML 代码)。
这是完整的代码...
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- Mark-up -->
<input id="addButton" type="button" value="Add Another Button">
<div style="width: 300px; height: 400px; top: 50px; left: 10px; position: absolute; border: 1px solid black;" >
<section id="page1" data-role="page">
<div class="content" data-role="content">
<a href="#" data-role="button">This is a button!</a>
</div>
</section>
</div>
<!-- Script -->
<script>
$(document).ready(function() {
$('#addButton').click(function() {
$('.content').append('<a href="#" data-role="button">This is another button!</a><br />');
});
});
</script>
</body>
</html>
我在这里想念什么?如何让 jQuery Mobile 像这样识别对 HTML 的动态更新?
谢谢!