通过JQuery Mobile动态添加按钮

Question

我正在开发一个jQuery Mobile应用程序。当页面加载时我会动态添加HTML内容。以下是一个简化的例子：

var h = "";
for (i=1; i<=5; i++) {
  h += "<div>Entry #" + i + "</div>";
  h += "<div class='ui-grid-a'>";
    h += "<div class='ui-block-a'><input type='button' value='Approve' onclick='return approveButton_Click(this);' /></div>";
    h += "<div class='ui-block-b'><input type='button' value='Reject' onclick='return rejectAbuse_Click(this);' /></div>";
  h += "</div><hr />";
});
$("#entries", "#myPage").append(h);

我的HTML在用户界面中显示出来了。但是，按钮并没有呈现出典型的JQuery Mobile按钮的样式。相反，它们看起来像传统的HTML按钮。我该如何让我动态添加的按钮应用JQuery Mobile样式呢？

谢谢

- user70192

Answer 1

以下是您的代码的工作示例：http://jsfiddle.net/Gajotres/NuCs2/ 在刷新按钮之前，必须首先使用.button()函数进行初始化。就像这样：

$("#approve"+i).button().button('refresh');
$("#reject"+i).button().button('refresh');

还有另一种解决方案，但仅当您重新创建整个页面时才应使用它：

$("#index").trigger("pagecreate");

这是第二种解决方案的示例：http://jsfiddle.net/Gajotres/mpFJn/ 如果您想了解更多关于标记增强方法的信息，请查看我的其他文章，坦白地说，它是我的个人博客。或者在这里找到它。

- Gajotres

---

有必要同时初始化和刷新小部件吗？由于HTML刚刚添加到DOM中，因此不应该需要刷新任何内容。或者我因某种原因错了吗？另外，您的第一个JSFiddle显示404错误。 - Jasper

Answer 2

使用Jquery Mobile中的"Refresh"方法来实现Jqm UI的动态外观。

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

- SaurabhLP

---

当我尝试这样做时，出现错误，显示“未捕获的错误：无法在初始化之前调用按钮方法；尝试调用方法'refresh'”。 - user70192