History.js和重新加載Javascript

所以我使用History.js插件通過AJAX在我的Wordpress主題中加載頁面。我已經成功地完成了這項工作，並使整個加載功能正常工作。但是，我有許多腳本在同一個文件中工作，他們當然不會加載狀態變化。History.js和重新加載Javascript

這是我的functions.js文件（一個非常簡短的）版本說明：

(function($){})(window.jQuery); 

$(document).ready(function() { 
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */ 
    $projects = $("#projects"); 
    $projects.append($(".contact")); 

    $projects.isotope({ 
     itemSelector : '.item', 
     layoutMode : 'masonry' 
    }); 
    /* END PREVIOUS BLOCK */ 

    /* BEGIN HISTORY.JS IMPLEMENTATION */ 

    var History = window.History, 
     State = History.getState(); 

    $('.nav a, .leftHold a').on('click', function(event) { 
     event.preventDefault(); 
     var path = $(this).attr('href'); 
     var title = $(this).text(); 
     History.pushState('ajax', title, path); 
    }); 

    History.Adapter.bind(window, 'statechange', function() { 
     load_site_ajax(); 
    }); 

    function load_site_ajax() { 
     State = History.getState(); 
     $('body, html').animate({ scrollTop : 0 }, 250, function() { 
      $("#article").animate({ left : -1*$(window).width() }, 250, function() { 
       $(this).load(State.url + ' #article', function() { 
        $(".nav li").each(function() { 
         $(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor"); 
        }).promise().done(function() { 
         $(".nav a").each(function() { 
          if(State.title.indexOf($(this).text()) != -1) { 
           $(this).parent().addClass('current_page_item'); 
           return false; 
          } 
         }); 
        }); 
       }).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); }); 
      }); 
     }); 
    } 

    /* END HISTORY.JS */ 
});

我在文件的末在結束body標籤之前加載此functions.js文件。我可以告訴每當我更改瀏覽器狀態時，$(document).ready();中的代碼不會再運行，因此同位素和我的其他Javascript都不會再次加載。

問題：

我應該如何確保functions.js每次pushState的是History.js啓動時運行的代碼？

來源

2012-10-03 cereallarceny

聽起來你需要再次執行ready代碼。環繞你的初始化代碼的功能：

$(document).ready(initializePage); 

function initializePage() { 
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */ 
    ... 
}

然後，當"statechange"火災，可以再次調用initializePage()。

您還需要確保歷史的代碼只運行一次，所以把這些代碼在一個單獨的函數：

$(document).ready(setupHistory); 

function setupHistory() { 
    /* BEGIN HISTORY.JS IMPLEMENTATION */ 

    var History = window.History, 
     State = History.getState(); 
    }); 
    .... 
}

來源

2012-10-03 06:32:46

我不能讓這個做什麼不同。我已經實現了你給的第二個代碼塊，並且設置得很好。但是，我不知道你是什麼意思，通過觸發準備好的事件，我會在何時何地這樣做？ – cereallarceny

沒關係觸發器，我沒有意識到jQuery在你附加它時會自動觸發'ready'事件。所以，我更新了我的答案，但說實話，我不完全確定我已經得到了這個問題了。 –

我已更新我的問題以反映您的意見。 – cereallarceny

History.js和重新加載Javascript

回答

相關問題