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

Question

I am trying to build a Cordova/PhoneGap app with the option to "Pull Up" to load dynamic content using ajax call. The remote call runs fine and the dynamic content is added as the child elements to tag. I am using iScroll4 plugin for the "pull" option which works fine.

Initial content in ListView is styled as needed. But it's not styled for the dynamic content.

When I tried the below things. The firstone gives some jquery error.

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

I am not able to provide a fiddle, as the question uses phonegap events.

Body Content:

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

I am using deviceready event insteaed of DOMContentLoaded event as its an PhoneGap app.

JS Code:

    <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');