jQuery load() 帮助

Posted 2023-02-25

【中文标题】jQuery load() 帮助

【英文标题】：Jquery load() help

【发布时间】：2010-04-01 12:06:36

【问题描述】：

我正在为 m 个个人网站创建一个投资组合页面。我有一个带有大约 20 个锚点的滑块，这些锚点链接到我从事过的项目，每个锚点都包含一个客户端徽标，单击该徽标应加载一些 html 内容，然后将该内容淡入同一页面上的容器 div 中。

有人建议我使用看起来很简单的 JQuery 方法 load()。我的问题是我是否必须为 20 个锚点中的每一个重复以下代码，因为每个锚点的 url 都不同，还是有更有效的方法？

$('a#project1').click(function() 
   $('#work').load('ajax/project1.html');

我还必须先使用 unload() 方法来确保我正在加载的 div 是空的吗？非常感谢。

【参考方案1】：

如果你只是给锚一个href 和一个这样的类：

<a class="project" href="ajax/project1.html">Project 1</a>
<a class="project" href="ajax/project2.html">Project 2</a>

您可以对所有这些都使用这样的 jQuery：

$('a.project').click(function() 
  $('#work').load(this.href);

---

解决方案 2：如果您的链接在容器中，您可以稍微更改选择器并减少重复，如下所示：

<div class="projects">
  <a href="ajax/project1.html">Project 1</a>
  <a href="ajax/project2.html">Project 2</a>
</div>

你会用这个：

$('.projects a').click(function() 
  $('#work').load(this.href);

这两种方法的好处是，在禁用 javascript 的情况下，它们会稍微优雅地降级（取决于您的内容的外观），并且用户仍然可以通过单击链接看到内容。

【参考方案2】：

要回答您的第二个问题，不，您不必使用卸载。正如load 的文档所解释的那样，它获取 URL 并将生成的 HTML 放入指定的容器中 - 就像您在工作 div 上执行了 .innerHTML 一样。

在最新的jQuery下，试试：

$('#slider-id').delegate('a', 'click', function() 
    $('#work').load(this.href);
);

如果使用 jQuery 1.3，请尝试：

// All anchors you want to be activated need to have the class workLink
$('a.workLink').live('click', functiON() 
    $('#work').load(this.href);
);

【讨论】：

@justkt- 如果不需要前一个函数的“活跃性”，delegate 和 live 与常规的 bind 相比是否存在某种开销？

为了回答这个问题，我们做了一些分析：ravelrumba.com/blog/event-delegation-jquery-performance