Pageinit功能会导致重复信息

Question

以下代码从服务器检索信息并将其显示在我的页面上。当我调用没有pageinit函数的方法时，它工作正常。当我用pageinit调用它时，我最终得到重复的信息x5。

例如，我应该检索并显示信息：

Hello

我最终得到了：

Hello
Hello
Hello
Hello
Hello

请告知错误。 TNKS。

以下代码正常

//Budget
    $.getJSON("example.com",function(data){
        var wrap = $("<div/>").attr('data-role', 'collapsible');
        //Create the h1 and the other elements appending them to bills List
        $("<h1/>",{
            text:"Budget Details"
        }).appendTo(wrap);
        $("<p/>",{
            text:"Bank Balance: \u00A3"+ data.bank
        }).appendTo(wrap);
        $("<p/>",{
            text:"Cash Balance: \u00A3"+ data.cash
        }).appendTo(wrap);
        $("<p/>",{
            text:"Daily Budget: \u00A3"+ data.daily_aim
        }).appendTo(wrap);
        $("<p/>",{
            text:"Daily Expense: \u00A3"+ data.spent_today
        }).appendTo(wrap);
        wrap.appendTo('#budgetList');
        $( "#budgetList" ).collapsibleset( "refresh" );
    })//end of budget page update

以下代码提供重复信息

$(document).on("pageinit",function(){
    //Budget
    $.getJSON("http://example.com",function(data){
        var wrap = $("<div/>").attr('data-role', 'collapsible');
        //Create the h1 and the other elements appending them to bills List
        $("<h1/>",{
            text:"Budget Details"
        }).appendTo(wrap);
        $("<p/>",{
            text:"Bank Balance: \u00A3"+ data.bank
        }).appendTo(wrap);
        $("<p/>",{
            text:"Cash Balance: \u00A3"+ data.cash
        }).appendTo(wrap);
        $("<p/>",{
            text:"Daily Budget: \u00A3"+ data.daily_aim
        }).appendTo(wrap);
        $("<p/>",{
            text:"Daily Expense: \u00A3"+ data.spent_today
        }).appendTo(wrap);
        wrap.appendTo('#budgetList');
        $( "#budgetList" ).collapsibleset( "refresh" );
    })//end of budget page update
});