沒有使用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>

我正在使用由DOMContentLoaded事件主導的deviceready事件作為其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');