使用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并且不能升级）。