Question

所以我动态创建一个按钮列表，然后将它们插入到jquery移动页面中的div中。问题是当它们被插入时，如果我只是在html中手动输入它们，它们将不再像它们那样被设置样式。这是我正在做的代码：

function iabGetURLs(){
var allURLs = window.localStorage.getItem("iabURLs");
html = "";
tmpURLs = allURLs.split(",");
for(var z=0;z<tmpURLs.length;z++){
    var urlParts = tmpURLs[z].split("|");
    html += '<input type="button" rel="' + urlParts[0] + '" class="iabListButton_' + z + '" value="' + urlParts[1] + '" />';    
}
$(".iabList").html(html); //puts it in the div

点击功能：

$("[class^=iabListButton_]").click(function(){
    $this = $(this);
    $goURL = $this.attr('rel');
    startBrowser($goURL); 
 });

Answer 1

动态添加内容后，您需要在每个按钮上单独调用.button()方法，或者在父级上调用trigger('create')以增强所有新添加的元素。

尝试更改

$(".iabList").html(html);

到

$(".iabList").html(html).trigger("create");

更新：由于您为它们注入了按钮的标记，因此您需要使用事件委派将事件处理程序附加到最近的静态（不更改）父元素。在你的情况下，似乎是$(".iabList")。这就是说改变

$("[class^=iabListButton_]").click(function(){
...
});

到

$(".iabList").on("click", "[class^=iabListButton_]", function(){
...
});

阅读更多 .on()

您可能需要首先使用.off()

分离处理程序

$(".iabList").off("click", "[class^=iabListButton_]").on("click", "[class^=iabListButton_]", function(){
...
});

Jquery Mobile通过javascript插入按钮会丢失样式

1 个答案: