Question

我有一个jquery-mobile页面，其中包含一个javascript函数，它从JSON表中获取信息并将其注入页面。我正在以可折叠集（手风琴）格式获取信息并对其进行格式化，当页面加载时，信息显示在页面上，但是只是文本而不是所需的格式。我通过将其硬编码到div中来测试js打印出来的确切内容，当我这样做时，它被格式化，因此它显然与该功能有关。它正在读取和打印出信息，只是无法识别可折叠格式。继承人的功能和HTML，如果你能帮助我，我会很感激：

  <!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"> </script> 
</head>

<body>
<div data-role="page" data-theme="a" id="Page1">

<div data-role="header" data-theme="c">
  <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data- icon="back"> Back </a>
  <a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
  <h2>Septicaemia</h2>
 </div>

<div data-role="content" data-theme="c" id="Page1_Content">

<p class="infotext"><b>Clinical Condition:</b></p>

<div id="texts" data-role="collapsible-set">

</div>


<script type="text/javascript">

$(document).on("pageinit", "#Page1", function(){ 
  var info="";  
  var imp= "Json/empirical.json";
  $.getJSON(imp, function(data) {

   $.each(data.tcontent, function(i, item) {
    if(item.Name=='Septicaemia'){
     var search=item.Variations;
     $.each(search, function(j, subitem) {
        info += '<div data-role="collapsible" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-theme="d" data-content-theme="d"> <h3>' + subitem.condition +'</h3> <p class="guidelinetext">' +  subitem.organisms + subitem.antimicrobial + subitem.alternative + subitem.comments + '</p> </div>';                        
    });
 }
    $("#texts").empty().append(info);
  });
 });
});

</script> 

</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>

Answer 1

collapsible-set 是一个小工具，具有手动增强的特殊功能。当您动态添加项目时，您需要手动调用这些函数，因为jQM无法单独增强 dyanmicaly添加的项目。

启动jQM后，所有元素都会增强，之后您手动启动动态元素。

$("#texts").empty().append(info).collapsibleset();

<强> Demo

当通过Javascript加载时，jquery-mobile可折叠手风琴将无法工作

1 个答案: