Question

我有一点小提琴，我修改过来演示我目前遇到的问题http://jsfiddle.net/TPxT7/。基本上我需要textboxes具有漂亮的jQuery Mobile样式，但不管我refresh或trigger什么似乎都没有改变。可折叠总是动态创建的。

如果链接出现问题，我会附上代码：

HTML：

<div id="medListDiv" data-role="collapsible-set" data-theme="e" data-content-theme="e" style="padding:10px;">

</div>

脚本（抱歉缺少缩进）：

$(function() {
var key, value;
var Storage = 5
// loop through local storage
for (var i = 0; i < Storage; i++) {
// retrieve the key
key = i;
// set the field from the key
value = "Medicine" + i.toString();

//$("#medListDiv").show();
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="right">' + '<h2>' + value + '</h2>' + '<input type="text" placeholder="Quantity" />' + '<textarea cols="40" rows="4" placeholder="Type any directions written on your prescription for the above medicine." ></textarea></div>';
 $("#medListDiv").append(text);
 }

 $('#medListDiv').find('div[data-role=collapsible]').collapsible();
//$('.ui-collapsible-set').collapsible("refresh");
//$("#medListDiv").trigger("create");
//$('.ui-collapsible-set').trigger("create");
});

正如您在底部看到的，我尝试添加以下代码（不是一次性完成）：

$('.ui-collapsible-set').collapsible("refresh");
$("#medListDiv").trigger("create");
$('.ui-collapsible-set').trigger("create");

我也尝试按照This问题给出一些答案，但似乎没有任何区别，也许我错过了什么，但我似乎无法解决它。

为了使事情更清楚，我希望它看起来像我在静态模式下创建的Fiddle。

非常感谢任何建议或想法。

Answer 1

经过一番愚蠢的思考并快速浏览其他问题和答案后，我通过添加以下内容解决了这个问题：

$('#medListDiv').find('div[data-role=collapsible]').collapsible();
$('#medListDiv').collapsibleset("refresh"); //This did the trick
$('#medListDiv').trigger("create");

感谢您阅读/路过：）

可折叠集内容不会采用jQuery Mobile风格

1 个答案: