jQuery Mobile可与Ajax结合使用 [英] JQuery mobile collapsible with Ajax

问题描述

试图显示包含未排序列表的JQMobile可折叠对象.当使用ajax调用追加列表时，不显示可折叠项.当静态添加列表时，可折叠项会正确显示.有什么建议吗?

trying to display the JQMobile collapsible containing an unsorted list. The collapsible is not shown when the list is appended using an ajax call. The collapsible is correctly shown when the list is added statically. Any advice?

谢谢

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

推荐答案

我认为您只需要将$list.listview();呼叫转换为$list.listview('refresh');.

I think you just need to turn your $list.listview(); call into $list.listview('refresh');.

此外，您可能会受益于更改添加新列表项的方式.检查这篇文章.如果可以避免，您不想在循环中嵌套追加调用.您也将受益于不使用jQuery $选择器不包装strHtml的情况，这是不必要的.

Also, you may benefit from changing up the way you append you new list items. Check this post out. You do not want to nest an append call within a loop if you can avoid it. You will also benefit from not wrapping your strHtml with the jQuery $ selector as it may not be necessary.

该优化链接由此处提供.

这篇关于jQuery Mobile可与Ajax结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！