使用jquery更新頁面

Question

我正在使用PHP和jQuery。我也使用Drupal，但我認爲這是一般問題，可能與Drupal無關。

我有一個頁面上的鏈接：

<a href="/my-module/js/1" class="launch-js">Link</a> 

點擊鏈接可啓動的jQuery至極的片段在一些HTML變淡。

if (Drupal.jsEnabled) { 
    $(document).ready(function(){ 
    $('a.launch-js').click(function(){ 
    ... 

這是在正在褪色的HTML還包含

<a href="/my-module/js/1" class="launch-js">Link</a> 

但點擊該鏈接如我所料不工作了。瀏覽器加載page/my-module/js/1而不是更新當前頁面。

Answer 1

當您加載新內容時，它將覆蓋您的dom元素，並且由於事件被附加到特定元素，它會隨元素一起消失。一個標準的解決方案是使用jQuery.delegate()到事件附加到一個元素越往上頁上，像這樣：

$('body').delegate('a.launch-js', 'click', function(ev) { 
    // same code as your function above 
}); 

這工作，因爲在DOM「泡沫」事件。當你點擊一個元素時，它會向該元素以及它的所有祖先一直髮送一個點擊事件（假設沒有自定義代碼停止傳播）。因此，您可以將事件處理程序附加到元素的祖先，並讓事件處理程序本身確定點擊是否來自您指定的元素。 jQuery隱藏了這個細節，並提供了一個很好的簡單的委託方法來爲你做這件事。

而在jQuery的1.7，這一方法已被所取代jQuery.on（）：

$('body').on('click', 'a.launch-js', function(ev) { 
    // same code as your function above 
}); 

注意我用body作爲這裏的選擇，但你可以使用任何選擇是所有的祖先可能的a.launch-js es將始終存在。 dom越深（或者換一種說法，作爲祖先，越靠近最終目標元素 - 在本例中爲a.launch.js），效率越高，因爲dom遍歷越少完成檢查事件。

更新：Hat @Clive，在Drupal 6僅支持jQuery 1.3版本的評論中指出了這一點。 1.3版本中沒有上述方法（on或delegate）。取而代之的是一個叫jQuery.live()來完成這個任務的方法，和它的工作是這樣的：

$('a.launch-js').live('click', function(ev) { 
    // same code as your function above 
}); 

這種方法有一些性能缺陷，其他方法不（見API文檔的具體細節，如果你是有興趣的），它也被棄用，所以只有在必須使用它的時候（例如，如果你使用jQuery版本1.3並且不能升級）。