使用 iScroll 在 jQuery Mobile ListView 中未设置样式的动态内容

Question

我正在尝试构建一个带有“上拉”选项的 Cordova/PhoneGap 应用程序，以使用 ajax 调用加载动态内容。远程调用运行良好，动态内容被添加为要标记的子元素。我正在为“拉”选项使用 iScroll4 插件，效果很好。

ListView 中的初始内容根据需要设置样式。但它的样式不适合动态内容。

当我尝试以下事情时。第一个给出了一些 jquery 错误。

$('#scroller').trigger('pagecreate');
$("#blogList").listview("refresh");

我无法提供小提琴，因为问题使用了 phonegap 事件。

正文内容：

<div data-role="page" id="home">
     <div data-role="content">
         <div id="wrapper">
             <div id="scroller">
                 <ul id="blogList" data-role="listview"></ul>
                 <div id="pullUp">
                     <span class="pullUpIcon"></span><span class="pullUpLabel"></span>
                  </div>
              </div>
         </div>
     </div>
</div>

我正在使用 deviceready 事件而不是 DOMContentLoaded 事件作为它的 PhoneGap 应用程序。

JS代码：

    <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            doBootstrap();   // Bootstraps
            getBlogList();   // Initial content loading
            loaded();
        }

        var myScroll, pullUpEl, pullUpOffset, generatedCount = 0;

        function pullUpAction() {
            $("#blogList").append('<li><a href="#">Generated row ' + (++generatedCount) + '</a></li>');
            myScroll.refresh();
        }

        function loaded() {
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll('wrapper', {
                useTransition: true,
                topOffset: pullUpOffset,
                onRefresh: function() {
                    if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                    }
                },
                onScrollMove: function() {
                    if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function() {
                    if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '';
                        pullUpAction();
                    }
                }
            });

            document.getElementById('wrapper').style.left = '0';

        }

        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);

        document.addEventListener('DOMContentLoaded', function() {
        }, false);
    </script>  

Answer 1

   $("#blogList").append('<li><a href="#">Generated row ' + (++generatedCount) + '</a></li>');
   $("#blogList").trigger('create');
   $('#blogList').listview('refresh');