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第一次将文件包含在主文件中.然后使用"委托"作为"动态"元素.

例如,假设我正在加载一个视图partial,它将具有类似于最初加载的链接按钮.因此我希望它们保持相同的点击功能.而不是典型的任务,例如:

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

我会用"代表团".jQuery为我们提供了一种简单的方法,可以将相同的事件|方法分配给具有匹配选择器的所有项目(现在和将来[动态]).这样做的方法如下:

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

前一个将告诉所有a类别的标签bob不要去任何地方,并提醒我他们的链接.这与a标记添加到DOM的时间无关.

例

要记住的一件事.on是,jQuery版本1.72(我认为)是新的.在此之前你会使用.live甚至.delegate改为.

在旁注

当然,代表团只会参与"事件".如果您需要使用JavaScript进行类似"布局"移动的操作,那么您最好制作一个"回调"函数,以便在ajax请求成功时使用.同样,您可以将这些回调方法放在单头文件中,但是您需要在$ .ajax [success或complete]中根据需要"调用"它们.

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

如果这还不够,请发表评论,我会尝试更清楚地提出任何问题.

Answer 2

实际问题是脚本中的事件处理程序在动态加载的内容中不起作用吗？

如果是这种情况，请更改这些事件处理程序以使用事件委托。例如：

$("#body_container").on( 'click', '#my-div', function() {...});

或者：

$("#body_container").delegate( '#my-div', 'click', function() {...});

#my-div动态内容中的某个元素在哪里。

现在，即使您在首次加载页面时只加载脚本一次，事件处理程序也将起作用。