javascript - 如何在jQuery中动态生成可折叠集？

我从php文件中检索了一些标题数据（主要标题，每个标题都有子标题）。

我收到的数据工作正常，但是当我想在jquery（移动设备）中生成可折叠集时，它并没有显示出漂亮的主题……只是纯文本？

这是我的HTML文件：

<div data-role="collapsible-set" data-content-theme="d" id="headlinegroup">

这是我的JavaScript文件：

$.ajax({
   type: "POST",
   url: "headline_getter.php",
   dataType: 'json',
   cache: false,
   success: function(data1){
   console.log ("debug 2");

   var i = 0;

   var $elements = '';
   $.each(data1[i].main, function() {
          console.log ("debug 3 ");

          $elements += ($('div[data-role=collapsible-set]#headlinegroup').append('<div data-role="collapsible"><h3>' + data1[i].main + '</h3><div data-role="fieldcontain"><fieldset data-role="controlgroup" id="headlinegroup'+[i]+'">'));
          var j = 0;
          $.each(data1[i].sub, function() {
                 console.log ("debug 4");

                 $elements += ('<label><input type="checkbox" name="headlines[]" data-mini="true" value="' + data1[i].mid[j] + '"/>' + data1[i].sub[j] + '</label>');

                 j++;

                 });

        $elements += ('</fieldset></div></div>');
        $elements.collapsible();

          i++;

          });
   }
   });

我真的不知道问题出在哪里。我在stackoverflow上读过一些线程，并添加了.collapsible属性，但它不起作用...仅有纯文本。

提前致谢。最好的问候，约翰。

最佳答案

您是否尝试过在每个附加元素的末尾添加.trigger('create')？