jquery - 使用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>

但点击此链接不再像我预期的那样起作用。浏览器加载页面/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 隐藏了这方面的细节，并提供了一个很好的简单委托(delegate)方法来为您执行此操作。

在 jQuery 1.7 中，此方法已被 jQuery.on 取代():

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

请注意，我在这里使用了 body 作为选择器，但您可以使用作为所有可能 a.launch-jses 的祖先的任何选择器，并且将永远存在。 dom 越深(或者换句话说，作为祖先，它越接近最终目标元素——本例中为 a.launch.js)，效率就越高，因为 dom 遍历越少完成检查事件。

更新:向 @Clive 致敬，他在评论中指出 Drupal 6 仅支持 jQuery 1.3 版本。上述方法(on 或 delegate)在 1.3 版本中都不存在。相反，有一个名为 jQuery.live() 的方法。完成这个任务，它的工作原理是这样的:

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

此方法有一些其他方法没有的性能缺陷(如果您感兴趣，请参阅 api 文档以了解具体细节)，并且它也已被弃用，因此仅在必要时才使用它(即，如果您使用 jQuery 1.3 版且无法升级)。