动态 Jquery 移动手风琴答案

【问题标题】：dynamic Jquery mobile accordion动态 Jquery 移动手风琴
【发布时间】：2013-03-22 00:42:16
【问题描述】：

在尝试使用 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');


}

【问题讨论】：

标签： javascript jquery jquery-mobile accordion

【解决方案1】：

您需要在您的outdiv 上调用collapsibleset() 方法

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

在这里工作jsFiddle

【讨论】：

很好的答案！您能否简要解释一下为什么需要它而不是触发器？
它们都在 jqm 1.2 和 1.3 中工作。 collapsibleset() 直接调用小部件初始化方法，trigger('create') 触发 create 事件但您需要在父元素上使用它，当您需要一次增强多个小部件时很好.

【解决方案2】：

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

讨论更多here

【讨论】：

【解决方案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"]');

【讨论】：

【解决方案4】：

将您的代码更改为：

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

您必须下载 jQuery Mobile 1.3.2 版。

【讨论】：