動態添加塌縮元件

可能重複：
Dynamically adding collapsible elements 動態添加塌縮元件

我試圖爲移動網站創建動態的內容，但我有正常顯示塌縮元件麻煩。我看着這裏發佈一些類似的問題，我無法成功地實施了以下的解決辦法：

$('div[data-role=collapsible]').collapsible();

下面是我的javascript：

function loadContent() { 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "company.xml", 
      dataType: "xml", 
      success: parseCompany 
     }); 
    }); 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "italy.xml", 
      dataType: "xml", 
      success: parseTour 
     }); 
    }); 
} 

function parseCompany(xml) { 
    $(xml).find("company").each(function() { 
     $("#company").html("<h1>" + $(this).find("name").text() + "</h1>"); 

     var link = $(this).find("contact-page").text(); 
     var message = "<p>Telephone: " + $(this).find("booking-phone").text() + "</p>"; 
     message += "<p><a href=" + link + ">Company Website</a></p>"; 

     $("#company-info").html(message); 
    }); 
} 

function parseTour(xml) { 
    $(xml).find("package").each(function() { 
     //var message = "<div data-role='collapsible' data-collapsed='true' data-theme='c'>"; 
     $("#package-name").html(" ").append($(this).attr("title")); 
     var message = "<p>Basecost: $" + $(this).attr("baseCost") + "</p>"; 
     message += "<p>Length: " + $(this).attr("length") + " days </p></div>"; 
     $("#package").html(message); 
    }); 
}

以下是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Tour Booking Made Easy</title> 
    <script src="tourinfo.js" type="text/javascript"></script> 
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery-1.6.2.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 


</head> 
<body onload="loadContent()"> 
    <div data-role="page"> 
<div id="company" data-role="header" data-theme="b"></div> 

<div id="company-info" data-role="content" data-theme="b"></div> 

<div data-role="collapsible" data-theme="c"> 
      <h2 id="package-name">test</h2> 
      <div id="package"> 
      <div id="stops"></div> 
     </div> 
    </div> 
</body> 
</html>

可摺疊功能不起作用，但看起來不像它應該那樣。我也嘗試從javascript中插入可摺疊的div標籤到html中的一些空的div標籤中，但隨後內容完全不出現。任何幫助將不勝感激。謝謝。

-Manav

來源

2011-08-19 ManaFive

您需要圍繞屬性選擇器引用引號。

$('div[data-role="collapsible"]').collapsible();

來源

2011-08-19 22:10:31 Dennis

動態添加塌縮元件

回答

相關問題