1

我正在尝试使用 Javascript 生成一些 jQuery Mobile 元素。在 javascript 运行并将生成的元素放置在myTestdiv 中之后，样式和脚本不会像它们在静态内容上那样附加。有没有办法让 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/

4

1 回答 1

3

首先，您的标记实际上略有偏差，可折叠集小部件旨在包含几个可折叠小部件。

例如（取自文档）

<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 文档中的以下问题。基本上，为了增强动态插入的标记，您必须初始化标记上的小部件，或者您可以触发create父元素上的事件，jQuery Mobile 应该初始化所有适当的小部件。

在这种情况下，您只有一个小部件，您只需要初始化可折叠小部件（这也很有趣，这适用于您当前的标记）

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

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

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

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

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

于 2013-07-30T18:21:05.877 回答