jQuery 脚本文件加载两次

Question

当我使用 Ajax 提交表单时，我想重新加载已更改的页面部分，而不是整个页面，为此我使用:

$('#body_container').load(a_href);

哪里a_href是源文件的位置。运行此命令后 #body_container更新后，div 的新内容似乎无法访问原始页面标题中包含的脚本文件，即使它包含在该原始页面中。仅当我输入 <script type="text/javascript" src="files.js"></script> 时它才有效在 a_href 的开头文件。

但是，我里面实际上有小div #body_container我也在改变，所以这样做我有 files.js多次被纳入不同级别。这似乎引起了冲突。

有没有办法包含 files.js一旦进入文档头，那么所有的div，无论其内容何时创建，总是识别出该文件在那里，等待使用？

Answer 1

在每次加载中包含相同的 JS 文件有点多。我的建议是第一次将该文件包含在主 head 中。然后对“动态”元素使用“委托(delegate)”。

例如，假设我正在加载一个 View 部分，该 View 部分将具有与最初加载的链接按钮类似的链接按钮。因此我希望它们保持相同的点击功能。而不是典型的分配，例如:

$("a.bob").click(function(e) { e.preventDefault(); alert($(this).prop("href")); });

我将使用“委托(delegate)”。 jQuery 为我们提供了一种简单的方法来执行此操作，它将为具有匹配选择器的所有项目(当前和 future [动态])分配相同的事件|方法。这样做的方法是这样的:

$(document).on("click", "a.bob", function(e) {
    e.preventDefault();
    alert($(this).prop("href"));
});

前一个将告诉所有具有 bob 类的 a 标签不要去任何地方，并提醒我它们的链接。这与 a 标签何时添加到 DOM 无关。

Example

要记住一件事，.on 是 jQuery 1.72 版的新内容(我认为)。在此之前，您可以使用 .live 甚至 .delegate 来代替。

<小时/>

旁注

当然，委托(delegate)仅适用于“事件”。如果您需要使用 JavaScript 进行“布局”移动之类的操作，那么您最好创建一个“回调”函数，以便在 ajax 请求成功时使用。同样，您可以将这些回调方法放在一个头文件中，但您需要根据需要在 $.ajax[success 或complete] 中“调用”它们。

查看成功和完成http://api.jquery.com/jQuery.ajax/了解有关 ajax 调用的基本回调的更多信息。此外，从版本 1.7 开始，您可以维护要根据需要触发的列表或 回调 的 jQuery 对象。要获取有关回调列表的更多信息，请参阅 http://api.jquery.com/category/callbacks-object/

如果这还不够，请发表评论，我会尽力让您的疑问更加清楚。