JQueryMobile多次加载ajax函数

Question

我正在使用JQueryMobile 1.4最新版本来构建一个phonegap应用程序。

我有加载内容并将其附加到dom的主页，并且每件事都可以正常工作，除非我使用ajax进入下一页加载，然后使用ajax转到第三页然后当我回到第二页，它加载了ajax函数，我有很多次，我回去的所有东西都加载它比预防时间更多。

这就是我在第二页中的内容：

<div data-role="page" data-cache="never" id="cars">
            <script type="text/javascript" src="js/category.js"></script>
            <div data-role="header" data-position="fixed" id="header">
            <a data-iconpos="notext" href="#panel" data-role="button" data-icon="bars" class="ui-nodisc-icon"></a>
            <h1 id="name"></h1>
            <a data-iconpos="notext" data-rel="back" data-role="button" data-icon="arrow-l" class="ui-nodisc-icon ui-btn-icon-left"></a>
            </div>

            <div data-role="content" class="ui-body"></div>



            <div data-role="panel" id="panel" class="panel" data-position="right" data-theme="a" data-display="overlay" data-position-fixed="true">
            <div id="logo"></div>
            <ul data-role="listview" id="fast_links">
                <li data-icon="false"><a href="#"><img src="img/info.png" class="ui-li-icon">InfoLine</a></li>
                <li data-icon="false"><a href="#"><img src="img/phone.png" class="ui-li-icon">Contact us</a></li>
                <li data-icon="false"><a href="#"><img src="img/map.png" class="ui-li-icon">Map</a></li>
                <li data-icon="false"><a href="#"><img src="img/rules.png" class="ui-li-icon">Rules</a></li>
            </ul>
            <div id="socialMedia">
                <a href="#"><img src="img/facebook.png"></a>
                <a href="#"><img src="img/twitter.png"></a>
                <a href="#"><img src="img/instagram.png"></a>
                <a href="#"><img src="img/snapchat.png"></a>
            </div>
</div>

这是category.js文件的内容：

var current_page = 1;
var total_pages = 1;
var category_id ;
$(document).on( "pageinit", "#cars", function( e ) {
    category_id = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*id=/, "" ).split("&")[0];
    var name = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*name=/, "" );
    $("#cars #name").html(decodeURIComponent(name.replace('+',' ')));
    getCars();
    $(document).on("tap",".car",function(e){
        $.mobile.changePage("car.html", { data: {"id":$(this).data("car-id"),"name":$(this).data("car-name")} });
    });
});
$(document).on("scrollstop", checkScroll);

function onBackKeyDown() {
    if($(".ui-panel").hasClass("ui-panel-open") == true ){
        $( ".panel" ).panel( "close" );
    }else{
        $.mobile.back();
    }
}
function onMenuKeyDown() {
    $( ".panel" ).panel( "toggle" );
}

function getCars(){
    $.ajax({
        url:"http://example.com/api/cars-by-category/"+category_id+"?page="+current_page,
        dataType: "json",
        async : false,
        beforeSend: function() { $.mobile.loading('show'); }, //Show spinner
        complete: function() { $.mobile.loading('hide'); }, //Hide spinner
        cache : false,
        data:{"ajax":1},
    }).then(function(data){
        if(data.total <= 0){
            alert("No car was found");
        }else{
            total_pages = data.last_page;
            $.each(data.data,function(index,car){
                $("#cars .ui-body").append("<a class='car' data-car-id='"+car.id+"' data-car-name='"+car.name+"'>"+
                                       "<div class='name'>"+car.name+"</div>"+
                                       "<img src='"+web+"img/"+car.picture+"' />"+
                                       "<div class='info'><span class='model'>Model"+car.model+"</span>"+
                                       "<span class='price'>"+car.price+" $</span></div>"+
                                       "</a>");
            });
            current_page++;
        }
    });
}




/* create scrollstop handler function */
function checkScroll() {
    /* You always need this in order to target
       elements within active page */
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),

        /* Viewport's height */
        screenHeight = $.mobile.getScreenHeight(),

        /* Content div - include padding too! */
        contentHeight = $(".ui-content", activePage).outerHeight(),

        /* Height of scrolled content (invisible) */
        scrolled = $(window).scrollTop(),

        /* Height of both Header & Footer and whether they are fixed
           If any of them is fixed, we will remove (1px)
           If not, outer height is what we need */
        header = $(".ui-header", activePage).outerHeight() - 1,
        footer = $(".ui-footer", activePage).outerHeight() - 1,

        /* Math 101 - Window's scrollTop should
           match content minus viewport plus toolbars */
        scrollEnd = contentHeight - screenHeight + header + footer;

    /* if (pageX) is active and page's bottom is reached
       load more elements  */
    if (activePage[0].id == "cars" && scrolled >= scrollEnd) {
        /* run loadMore function */
        if(current_page <= total_pages){ 
            getCars();
        }
    }
}

所以当我返回时，导航会多次调用getCars（）函数。