Question

我正在尝试在jquery mobile中构建一个动态可折叠集，下面的代码只是创建一个带有两个段落元素的常规div。

所有事情都发生在对aspx webmethod的ajax调用之后，它返回了我想要放入集合中的一些值。

html head：

<head> 
    <title>My Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />

    <script>

        $(document).ready(function () {



            $.ajax({
                type: "POST",
                url: "getdata.aspx/return_prof",
                data: "{prof:'צלם'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {

                    var parsedData = JSON.parse(res.d);

                    $("#tableDiv").append('<div id="colapse_div" data-role="collapsible-set"></div>');

                    $("#colapse_div").append('<div id="col1" data-role="collapsible"></div>');

                    $("#col1").append('<h3>צלמים</h3>');
                    $("#col1").append('<p>'+parsedData[0].fName+'<//p>');
                    $("#col1").append('<p>'+parsedData[0].lName+'<//p>');





                },
                error: function (res, msg, code) {
                    // log the error to the console
                    alert("The following error occured: " + msg + " " + code);
                } //error

            });

        });




    </script>


</head>

html正文：

<body>


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

            <div data-role="header" data-theme="a">
                <h1> בדיקה</h1>
            </div> 

            <div data-role="navbar">
                <ul>
                   <li><a href="index.htm">חברי העמותה</a></li>
                    <li><a href="build.htm">בניית צוות</a></li>
                    <li><a href="test.htm"> בדיקה</a></li>
                </ul>
            </div>

            <div data-role="content">
            <div id="tableDiv">

               </div>

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

                        <div data-role="collapsible" >
                        <h3>Section 1</h3>
                        <p>I'm the collapsible set content for section 1.</p>
                        <p>I'm the collapsible set content for section 1.</p>
                        </div>



                    </div>
               </div>

            </div>

            <div data-role="footer">
                <h1>footer area</h1>
            </div>
    </div>
</body>

Answer 1

试试这个：

$("#colapse_div").collapsible();

但它可能会失败，因为jQM在设计dynqamically创建的可折叠集时会出现问题。

最好的选择是使用旧的：

$('[data-role="content]').trigger('create');

此行将重新添加添加到div内容的所有新内容。你可以更进一步，使用：

$('[data-role="content]').trigger('pagecreate');

此行将重新显示所有新页面内容，包括页脚和标题。

阅读我的其他文章/答案，了解有关增强动态添加内容标记的详情：jQuery Mobile: Markup Enhancement of dynamically added content

使用jsFiddle示例： http://jsfiddle.net/Gajotres/ck6uK/

在ajax调用之后创建动态可折叠集

1 个答案: