为什么'pageinit'两次开火？

Question

请有人告诉我为什么 pageinit 正在运行两次？我有一个问题，我的listview项目将被复制，并通过放入一个警告框我发现这是因为 pageinit 正在运行两次。但是，我不明白为什么......

这是我的JS代码：

$(document).on('pageinit', '#searchPage', function(){

alert("This alert box runs twice!");

$.ajax({
    dataType: "json",
    url: '../JS/food.json',
    success: function(result){
        var output = '';
        $.each(result, function(i, food){
            output += '<li><a href="#" id="' + i + '" class="food_info"><h2>' + food.name + '</h2><p>' + food.calories + ' Calories per 100g</p></a></li>';
        });

        $('#searchFood').html(output).promise().done(function(){
            $(this).on("click", ".food_info", function (e) {
                e.preventDefault();
                $("#foodInfo").data("result", result[this.id]);
                $.mobile.changePage("#foodInfo", {transition : "slide", reverse : false});
            });

            $('#searchFood').prepend('<li data-role="list-divider" data-theme="c" role="heading">Food and Meals:</li>');
            $(this).listview("refresh");
        });
    },

    error: function(jqXHR, textStatus, errorThrown){
            alert(errorThrown);
    }
});
});

在做了一些研究后，我认为它可能与$.mobile.changePage有关，但无法找出任何替代方案。任何帮助将非常感激！提前谢谢！