Question

尝试显示包含未排序列表的JQMobile可折叠。使用ajax调用追加列表时，不显示可折叠。静态添加列表时，可正确显示可折叠。有什么建议吗？

感谢

<script>
    $(document).ready(function() {

        var updateSectionsPage = function() {

            // 1. Get the page and list we need to work with
            var $page = $('#homeList');

            // 2. Build the URL we need using the data stored on the main view page
            var strUrl = 'http://xyz';

            // 3. Get the sections and append them to the list          
            $.ajax({
                url: strUrl,
                dataType: 'json',
                cache: false,
                success: function(data) {

                    $sections = $page.find('#sections');

                    // 3.1 Delete the existing content, if any
                    $sections.empty();

                    // 3.2 Create a new collapsible
                    $sections.html('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');

                    // 3.3 Create the title of collapsible

                    $sections.html('<h3>ColdPlay</h3>');

                    // 3.4 Create the list and store it into a JQuery object
                    $sections.html('<ul id="list" data-role="listview" data-inset="false"></ul>');

                    $list = $page.find('#list');

                    // 3.5 Build HTML that contains the desired information
                    for (var j in data.list[0].list){
                        var strHtml = '<li><a href="#pageDetail"><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></a></li>';

                        // Make it into a jQuery object...
                        var item = $(strHtml);
                        // ...so we can append it to our list.
                        $list.append(item);
                    }


                    // Call the listview widget.
                    $list.listview();                   
                },
                error: function() {
                    alert("An error occurred. please, try it again!");
                }               
            });

        }();  // 4. Call the updateSectionsPage() function
    })
</script>

Answer 1

我认为您只需将$list.listview();来电转为$list.listview('refresh');。

此外，您可以通过更改附加新列表项的方式获益。检查this post out。如果可以避免，则不希望在循环中嵌套追加调用。您也可以不使用jQuery strHtml选择器包装$，因为它可能没有必要。

该优化链接由另一个SO帖子here提供。

Answer 2

创建列表后，请使用以下代码段 -

$list.listview('refresh');
$page.trigger('create');

取代$list.listview();

在jquery mobile中使用$(document).ready()并不是最佳做法。请参阅下面的注释

重要提示：使用pageInit（），而不是$（文档）.ready（）

你在jQuery中学到的第一件事就是在里面调用代码   $（document）.ready（）函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

来自http://jquerymobile.com/demos/1.0/docs/api/events.html

Answer 3

谢谢大家，我的代码中的问题是在丢失的collapsible（）小部件调用上。一旦动态创建html页面，我们需要使用jqmobile小部件调用来呈现它：listview（）和collapsible（）。这是工作代码。

function fillSectionsPage() {
    // 1. Get the page we need to work with
    var $page = $('#sectionList');

    // 2. Build the URL we need using the data stored on the main view page
    var strUrl = 'http://xyz';

    // 3. Get the sections and append them to the list          
    $.ajax({
        url: strUrl,
        dataType: 'json',
        cache: false,
        success: function(data) {

            $sections = $page.find('#sections');

            // 3.1 Delete the existing content, if any
            $sections.empty();

            // 3.2 Append a new collapsible and store it into a JQuery object
            $sections.append('<div id="collapsible" data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c"></div>');
            $collapsible = $page.find('#collapsible');

            // 3.3 Append the title of collapsible
            $collapsible.append('<h3>' + data.list[0].title + '</h3>');

            // 3.4 Append the list header and store it into a JQuery object
            $collapsible.append('<ul id="list" data-role="listview" data-inset="false"></ul>');                 
            $list = $page.find('#list');

            // 3.5 Build the list items
            var htlmList = [];
            for (var j in data.list[0].list){                       
                htlmList[j] = '<li><a href="#pageDetail"><img src="' + data.list[0].list[j].img + '" /><h4>' + data.list[0].list[j].title + '</h4></a></li>';
            }

            // 3.6 Append the list items to the list header
            $list.append(htlmList.join(''));

            // 3.7 Render the listview and the collapsible
            $list.listview();
            $collapsible.collapsible();
        },
        error: function() {
            alert("An error occurred, please, try it again!");
        }               
    });
}

Answer 4

希望检查该教程，Collapsible content and Ajax loading with jQuery Mobile以及How do I toggle the jQuery Mobile Accordion with a button click?

JQuery mobile可与Ajax折叠

4 个答案: