0

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

这一切都发生在对 aspx webmethod 的 ajax 调用之后，该方法返回一些我想放入集合中的值。

html头： 

<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>
4

1 回答 1

1

试试这个：

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

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

最好的办法是使用好旧的：

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

此行将重新设置添加到 div 内容的所有新内容的样式。您可以更进一步并使用：

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

此行将重新设置所有新页面内容的样式，包括页脚和页眉。

阅读我的另一篇文章/答案以了解有关增强动态添加内容的标记的更多信息：jQuery Mobile：动态添加内容的标记增强

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/ck6uK/

于 2013-04-03T13:37:44.807 回答