javascript - 动态 Jquery 移动手风琴

Question

在尝试使用 jquery 创建动态手风琴时，我无法弄清楚为什么单个元素没有折叠。它们只是作为文本出现，而不是呈现手风琴效果。谁能发现我的错误？（假设数据变量都包含数据）

编辑：出于好奇，我只是在 firefox 而不是 chrome 中尝试过，手风琴行为有效..我不明白

var outdiv = $('<div data-role="collapsible-set"></div>');

for(var i=0; i<data.length; i++){

    var innerdiv = $('<div data-role="collapsible" data-collapsed="true" ></div>');
    innerdiv.append('<h3>' + 'Tweet #' + i + '</h3>');
    innerdiv.append('<p>' + data[i].text + '</p>');

    outdiv.append(innerdiv);

    outdiv.appendTo('#output');


}

Answer 1

你需要调用collapsibleset()你的方法outdiv

$('#output [data-role=collapsible-set]').collapsibleset();

在这里工作jsFiddle

Answer 2

我不是 jQuery 移动用户，但在我看来，您需要为添加的内容设置行为，例如$('#output').trigger('create')在循环之后。

它在这里讨论得更多

Answer 3

我不知道您是否可以通过这种方式选择整个元素，但您也可以使用 jQuery 的Attribute Contains Selector

//So your outdiv would become 
var outdiv = $('div[data-role*="collapsible-set"]');

//And then innerdiv, something like
var innerdiv = $('div[data-role*="collapsible"][data-collapsed*="true"]');

Answer 4

将您的代码更改为：

outdiv.append(innerdiv).collapsibleset("refresh");

您必须下载jQuery Mobile 1.3.2 版。