Question

可能重复：
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

Answer 1

您需要在属性选择器周围引用。

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

动态添加可折叠元素

1 个答案: