Why is 'pageinit' firing twice?

Question

Please could someone tell me why the pageinit is running twice? I had an issue where my listview items would be duplicated and by putting in an alert box I identified that it is because the pageinit is running twice. However, I can't see why...

Here is my JS code:

$(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);
    }
});
});

After doing some research I think it may be related to the $.mobile.changePage but was unable to figure out any alternative. Any help would be really appreciated! Thanks in advance!