html - 如何在jquery mobile中滑动页面时动态附加内容

Question

我试图在滑动页面时动态附加内容我尝试以下方法

JS部分：

var i = 2;
$(document).on('pagebeforeshow ', function () {
    loadPage(i);
});

function loadPage(index) {
    $.ajax({
        url: "connection.php",
        type: "POST",
        datatype: 'json',
        data: {
            "pageIndex": index
        },
        beforeSend: function (a, b) {
            $.mobile.showPageLoadingMsg();
        },
        success: function (result) {
            var a = $.parseJSON(result);
            $('.primarycontent').append('<img src="images/' + a.report + '" />');
            $.each(a.controls, function (j, row) {
                if (row.controltype == "dropdown") {
                    var selectarray = row.controlvalues.split(",");
                    addDropDown(selectarray, j);
                }
                if (row.controltype == "button") {
                    var urlvalue = row.controlvalues;
                    addButton(urlvalue, j);
                }

            });
        },
        complete: function () {
            $.mobile.hidePageLoadingMsg();
        },
        error: function (request, error) {
            alert('Network error has occurred please try again!');
        }
    });
    var dropdown_array = [];

    function addDropDown(values, count) {
        var selectElm = $("<select/>");
        selectElm.attr({
            'name': 'dropdown-' + count,
                'id': 'dropdown-' + count
        }).appendTo('#dropdownplace');
        dropdown_array.push('dropdown-' + count);
        $.each(values, function (a, b) {
            selectElm.append($("<option/>").attr("value", b).text(b)).appendTo('#dropdown-' + count);
        });
        $('select').selectmenu();
        return;
    }

    function addButton(url, count) {
        for (m = 0; m < dropdown_array.length; m++) {
            var selected_dropdown = $("#" + dropdown_array[m]);
            // alert(selected_dropdown.val());
        }
        $('#buttonPlaceHolder').append('<a href="' + url + '" data-role="button">Refresh</a>');
        // refresh jQM controls
        $('#home2').trigger('create');
        //myselect[0].selectedIndex = 3;
        //var button = $("<a/>");
        //button.attr({'href':url+});
        return;
    }
}


$(document).off('swipeleft').on('swipeleft', 'div[data-role="page"]', function (event) {
    if (event.handled !== true) // This will prevent event triggering more then once
    {
        alert(hi);
        var nextpage = $.mobile.activePage.next('div[data-role="page"]');
        // swipe using id of next page if exists 
        if (nextpage.length > 0) {
            alert(hi);
            i++;
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
            loadPage(i++);
        }
        event.handled = true;
    }
    return false;
});
$(document).off('swiperight').on('swiperight', 'div[data-role="page"]', function (event) {

    if (event.handled !== true) // This will prevent event triggering more then once
    {
        var prevpage = $(this).prev('article[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
        event.handled = true;
    }
    return false;
});

索引.html：

 <div data-role="page" id="home2">
     <!-- Header -->
   <div data-role="header" class="header1" data-theme="b">
     <h1>Group:Group Name</h1>
       <a data-role="button" data-rel="back" data-icon="arrow-l">Search</a>
   </div>
   <!-- Content -->
   <div data-role="content">
    <div>
        <div id="dropdownplace"></div>
        <div id="buttonPlaceHolder"></div>
        <div class="primarycontent"></div>
    </div>
   </div>
   <!-- Footer -->
   <div data-role="footer" data-id="persistantFooter" data-position="fixed" class="nav-glyphish-example">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="c">
      <ul>
        <li><a href="#" id="home" data-icon="custom">Home</a>
        </li>
        <li><a href="#" id="feeds" data-icon="custom">Feeds</a>
        </li>
        <li><a href="#" id="secure" data-icon="custom" class="ui-btn-active">Secure</a>
        </li>
        <li><a href="#" id="contacts" data-icon="custom">Contacts</a>
        </li>
      </ul>
     </div>
   </div>
</div>

现在我想在向左或向右滑动时附加内容我将索引值发送到我的 connection.php。我想从这个链接中喜欢这个演示

谢谢