Jquerymobile添加动态可折叠div [英] Jquerymobile adding dynamic collapsible divs

问题描述

可能重复：

动态添加可折叠元素

我想知道我怎么做动态添加一个可折叠的div，这样的事情可以用Jqm listviews来完成，在

I would like to know how I could dynamically add a collapsible div, such a thing can be done with Jqm listviews, calling lisview('refresh') after

之后调用lisview（'refresh'）这里是测试代码：

here is the testing code:

http://jsfiddle.net/ca11111/UQWFJ/5 /

编辑：在上面，它会被追加并呈现，但是多次

edit: in above, it's appended and rendered, but multiple times

edit2：好像这样工作？

edit2: seems working like this?

推荐答案

如果省略刷新正在初始化元素（不刷新它）：

How about omitting the refresh since you are initializing the element (not refreshing it):

$('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$('#coll').find('div[data-role=collapsible]').collapsible();  

这是你的JSFiddle的更新版本： http://jsfiddle.net/UQWFJ/7/ （注意我将 setTimeout 更改为 setInterval 连续向DOM添加新元素）

Here is an updated version of your JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Notice I changed your setTimeout to a setInterval to continuously add new elements to the DOM)

你也可以通过在变量中保存新元素来优化它所以你可以只在那个元素上调用 .collabsible（）：

Also you could optimize this by saving the new element in a variable so you can call .collabsible() on just that element:

var $element = $('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$element.collapsible();  

这是一个有这种优化的JSFiddle： http://jsfiddle.net/UQWFJ/9/

Here is a JSFiddle with this optimization: http://jsfiddle.net/UQWFJ/9/

这篇关于Jquerymobile添加动态可折叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！