在 jQuery Mobile 中动态创建可折叠集答案

【问题标题】：Dynamically created collapsible-set in jQuery Mobile在 jQuery Mobile 中动态创建可折叠集
【发布时间】：2013-09-20 19:05:32
【问题描述】：

好吧，一旦我看到这个问题的答案，我会觉得自己很愚蠢。我很确定。

我已经完全按照我以前想要的方式创建了它，但我现在正在重构我的代码以用于新版本。我正在尝试在 jQuery Mobile 中动态创建可折叠集，但我的 html 无法正确呈现。

  <div data-role="header">
        <h2>Playground</h2>
    </div>
    <div data-role="content">
        <div data-role="button" id="addprimary" data-inline="true">Add 5</div>
        <div data-role="collapsible">             
            <h4>Collapsible</h4> 
            <form id="makecollapsible">
            </form>
        </div>
    </div>
    <div data-role="footer">
        <h4>Please, no applause</h4>
    </div>
</div>

<script>
$('#addprimary').on('click', function () {
    Markup.Collapsible();
});

var Markup = new Object();


Markup.Collapsible = function () {

$('#makecollapsible')
.append($('<div>')
    .attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
 );
for (i = 0; i < 5; i++) {
    ($('<div>')
         .attr({ 'data-role': 'collapsible', 'data-content-theme': 'c', 
              'data-collapsed': 'true' })
         .html('<h4>' + i +'</h4>'))
    .appendTo('#primary');
   }
}
</script>

有人可以看看这个http://jsfiddle.net/c2jLY/ 并告诉我我有什么问题吗？我的 <div>s 和 data-role='collapsible' 没有呈现为可折叠，这也对我稍后尝试放入它们的 HTML 产生影响。

感谢您的帮助，谢谢！

【问题讨论】：

您绝对应该在问题中发布您的代码。
您能描述一下您所看到的或您认为的错误吗？如果我看一下您的小提琴，请单击“添加 5”按钮，然后单击可折叠元素，它会打开其中包含您的内容。我会出现一切都对我有用。您希望看到什么？
@BradleyBossard 他想要这个jsfiddle.net/Palestinian/zyEuB :)
@BradleyBossard 我需要增强的 jQueryMobile DOM 元素，而不仅仅是 HTML 本身。 Omar 的解决方案完全符合我的需要

标签： javascript jquery html jquery-mobile

【解决方案1】：

在Markup.Collapsible 函数内部，在其末尾添加以下内容。对于 collapsible-set，您需要告诉 jQM 您正在增强 .collapsibleset() 并将其与 .trigger('create') 结合。

$('#makecollapsible').collapsibleset().trigger('create');

Demo

我忘了说动态追加项目时，在父元素上调用增强方法；这样做，会增强儿童元素。因此，您不需要为每个附加的可折叠项使用.collapsible().trigger('create')。

【讨论】：

这正是我所需要的。谢谢。

【解决方案2】：

我在这里展示的是一个简单但有效的：

<script type="text/javascript">
//dynamically make 10 collapsible items and append them to the collapsible-set
var jj = "SUPER item added..";

$('[data-role="content"]').append('<div id="set" data-role="collapsible-set"></div>');
var count;
	for (count=0; count < 10; count++) {  // div id should be from id='c0' to 'c9'
		$("#set").append('<div id="c' + count + '" data-role="collapsible">');
		$("#c" + count.toString()).append('<h3>Adding element_' + count +'</h3>');
		$("#c" + count.toString()).append(jj + 'count ' + count + '</div>');

	}

// either one is tested working below:
//		$('[data-role="content"]').trigger('create');
		$( "#set" ).collapsibleset( "refresh" );

</script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
	<!------------------------page 1 ListView template-->
		<div data-role="page"  id="page01">
		<div data-role="header" data-theme="b" data-position="fixed">			
			<h2>-- DEMO -- &nbsp;&nbsp;</h2>
		</div>
		<div data-role="content"  id="content">
  
    </div>
</body>

【讨论】：