Question

过去几天我一直试图了解jQuery Mobile似乎正在做的这种奇怪行为。

我有一个项目列表，列表中的每个项目都有一个按钮，该按钮具有自己的详细信息列表。我想要做的是当用户点击其中一个按钮时，它的详细信息会在具有可折叠界面的对话框中作为列表加载。当用户单击列表中的某个项目时，它会显示更多详细信息。列表中列表中的一种列表。

运行这个jsfiddle链接可以让你知道我想要做什么。 http://jsfiddle.net/pSRxu/7/

以下是代码：

  <!-- HTML Code -->
 <div data-role="page" id="page"> 
    <a href="#page_0" data-role="button" data-rel="page" class="clicker" id="tester_1">Tester 1</a>
    <a href="#page_0" data-role="button" data-rel="page" class="clicker" id="tester_2">Tester 2</a>
</div>
<div data-role="page" id="page_0"></div>

/* jQuery Code */ 
$(document).ready(function () {

     $(".clicker").on("click", function () {
         var page_id = $(this).attr("id").split("_")[1];
         var items = '<div data-theme="d" data-role="header" class="ui-corner-top ui-overlay-shadow ui-header ui-bar-d" role="banner"><h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Dialog</h1></div><div data-collapsed-icon="arrow-r" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-enhanced="true" data-role="collapsible"><h2 class="ui-collapsible-heading"><a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus" href="#"><div id="preRendered_' + page_id + '">' + page_id + '</div><span class="ui-collapsible-heading-status"> click to collapse contents</span></a></h2><div aria-hidden="false" class="ui-collapsible-content"><ul id="collapsibleContent' + page_id + '">Tester ' + page_id + '</ul></div></div></div>';
         $("#page_0").empty();
         $("#page_0").append(items);
     });
 });

这里发生的事情是，如果您单击其中一个按钮，页面加载时可折叠界面完好无损，但如果您再次退出并再次单击（或另一个按钮），则界面将不再完整。

我很漂亮这与DOM已经加载的事实有关，但我不确定该怎么做。

由于

Answer 1

您只需要向页面添加触发器（“创建”）以强制jQM重新增强内容

$("#page_0").append(items).trigger("create");

更新了 FIDDLE

你实际上是在使用jQM 1.2，还是只是为了小提琴？

第一次点击后，jQuery Mobile页面失去了它的可折叠性

1 个答案: