在頁面內容加載Ajax後加載Javascript

Question

我正在使用Ajax（以及jQuery和CoffeeScript）在我創建的新網站中加載頁面。對於導航菜單然後我用jQuery函數load加載網頁（即內容）這樣的只是其中的一部分（從/page1）：

$('a').click -> 
    $('#container').load '/page2 #content' 

    false 

的問題，這是我在JavaScript代碼page1（或更準確地說，在一個模板文件中）在站點上是全局的（由於資產管道，因爲我使用的是Rails 3.1）。此代碼將位於page2的DOM元素中的某些操作綁定到事件（這是否是正確的術語？）。但是，由於這個腳本是在第一次加載（這很容易可以page1）的頁面上運行，然後結合這些動作元素的腳本將在page1執行，因而DOM元素，他們實際上應該是綁定（在page2）將不會被觸及。

現在，我知道一些方法可以解決這個問題，但我不喜歡他們。其中之一就是將這個動作/事件綁定到一個函數中，然後在用Ajax加載page2後調用這個方法，但是這需要我在我的頁面加載邏輯中引入一個特殊情況，在這裏我加載綁定函數在頁面加載之後綁定元素，或者在我調用該函數的page2內容中有腳本。

我寧願不與前一種方法去，因爲我有加載頁面的一個更一般的方式（通過使用<a>標籤的href屬性），並引入在頁面加載特殊情況下只是uglifies這一切。後者的解決方案相當不錯，但我不願意將<script>標籤放入我正在檢索的頁面內容中。我喜歡將內容與行爲分開，我認爲這可能會混合一點點。

所以，我真正想知道的是什麼是解決這個問題的好辦法。如果有人知道如何去做這件事，那麼我會歡迎任何建議。

Answer 1

你可能想看看jQuery的live()事件綁定。

與live()綁定的事件也適用於回溯添加的DOM元素，它應該可以解決您的問題。

編輯：準確地說，live()結合$(document)和檢查活動的target屬性已經起泡一路通過DOM - 這就是爲什麼即使元素結合事件回調後添加的綁定工作。

示例HTML：

<div id="some_triggers"> 
    <a id="foo" href="#">Foo!</a> 
</div> 

實例的jQuery：

$('#foo').click(function(){ alert('foo') }); 
$('#bar').click(function(){ alert('bar') }); 
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>'); 
$('#foo').live('click', function(){ alert('foo live()!') }); 
$('#bar').live('click', function(){ alert('bar live()!') }); 

// -> clicking #foo alerts "foo" and "foo live()" 
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.