通过JQuery Mobile动态添加按钮 [英] Dynamically Add Buttons Via JQuery Mobile

问题描述

我正在开发JQuery Mobile应用.页面加载时，我正在动态添加HTML.修剪后的示例如下所示:

I am working on a JQuery Mobile app. I am dynamically adding HTML when the page loads. A trimmed down example is shown here:

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出现在UI中.但是，这些按钮并未呈现为典型的JQuery Mobile按钮.相反，它们看起来像传统的HTML按钮.如何获得动态添加的按钮以应用JQuery移动样式?

My HTML is appearing in the UI. However, the buttons are not rendered as a typical JQuery Mobile buttons. Instead, they look like traditional HTML buttons. How do I get my dynamically added buttons to apply the JQuery mobile styling?

谢谢

推荐答案

以下是您的代码中的一个有效示例: http://jsfiddle.net/Gajotres/NuCs2/

Here's an working example out of your code: http://jsfiddle.net/Gajotres/NuCs2/

在刷新按钮之前，必须先使用.button()函数对其进行初始化.就是这样:

Before you can refresh the button/s it first must be initialized with .button() function. Just like this:

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

还有另一种解决方案，但只有在重新创建整个页面时才应使用它:

There's also another solution but you should use it only if you are recreating a whole page:

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

这是第二种解决方案的示例: http://jsfiddle.net/Gajotres/mpFJn/

And here's an example for the second solution: http://jsfiddle.net/Gajotres/mpFJn/

如果您想了解有关标记增强方法的更多信息，请参阅我的其他 此处 找到它.

If you want to find out more about methods of markup enhancement take a look at my other ARTICLE, let me be transparent, it is my personal blog. Or find it HERE.

这篇关于通过JQuery Mobile动态添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！