Question

我正在尝试使用Javascript生成一些jQuery Mobile元素。在javascript运行并将生成的元素放在myTest div中之后，样式和脚本不会附加在静态内容上。有没有办法让jQuery在生成的代码上执行？

以下是一个例子：

标记：

<!-- Does not look correct when populated -->
<div id="myTest">
</div>

<!-- Looks correct -->
<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">
  <div data-role="collapsible">
    <h3>Test</h3>
  </div>
</div>

脚本：

$(document).ready(onloadFunc);

function onloadFunc() {
  var parent = $('<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">');
  var item = $("<h3>").html("test");
  parent.append(item);
  $("#myTest").append(parent);
}

链接到jsfiddle：http://jsfiddle.net/DcFhj/

Answer 1

首先，您的标记实际上稍微关闭，collapsible-set小部件旨在包含几个可折叠的小部件。

例如（取自documentation）

<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="false">
  <h3>Section 1</h3>
   <p>I'm the collapsible set content for section 1.</p>
   </div>
   <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

从jQuery Mobile文档中查看以下 question 。基本上一般来说，为了增强动态插入的标记，你必须在标记上初始化小部件，或者你可以在父元素上触发create事件，jQuery Mobile应该初始化所有适当的小部件。

在这种情况下，你只需要一个小部件，你只需要初始化collasible小部件（也足够有趣，这适用于你当前的标记）

$("#myTest").append(parent).find('div').collapsible();

http://jsfiddle.net/DcFhj/3/

例如，如果你有几个需要增强的小部件（或者只是为了简单起见），你可以改为触发create方法（这不适用于你当前的标记，但如果你纠正它应该）。

 $("#myTest").append(parent).trigger('create');

http://jsfiddle.net/DcFhj/4/

如何让jQuery Mobile重新执行生成的代码？

1 个答案: