我有jQuery代码在渲染视图时运行正常。但是,我希望在Ajax请求成功后运行相同的代码。 jQuery最初是在文档准备好时执行的,但是我将它移动到它自己的函数中,因此可以调用它。该函数为一些标签元素添加了一些简单的类。以下是我到目前为止的情况:
$(function () {
afterLoad();
});
$.ajaxSetup({
success: function () {
afterLoad();
}
});
function afterLoad() {
// code to execute
}
在发出简单的Ajax请求后,这无法正常执行:
$('#ajaxTest').load('<MVC Route>')
部分视图返回正常,但afterLoad()
尝试在局部视图位于DOM之前运行。如果我再次执行相同的调用afterLoad()
确实运行(在前一个局部视图上),但它会被新的局部视图覆盖。
有什么想法?另一种方法是没问题的,我正在寻找一个是在部署视图的Ajax请求之后运行站点级.js文件。母版页加载了site.js文件,我想在不重新加载文件的情况下执行它的代码(因为它已经被浏览器加载)。另外,我不想强迫开发人员对他们的Ajax调用执行任何不同的操作,因此需要使用简单的.load()
等。
答案 0 :(得分:16)
这就是我用来做你想做的事情:
如果需要访问XHR对象,也可以访问它。
//Global Ajax Complete
$("body").bind("ajaxSend", function(e, xhr, settings){
//Sent
}).bind("ajaxComplete", function(e, xhr, settings){
//Complete
}).bind("ajaxError", function(e, xhr, settings, thrownError){
//Error
});
编辑: 这是我的结构,一直在为我工作。
<强> site.js 强>
function afterLoad() {
// code to execute
}
$(document).ready(function(){
$("body").bind("ajaxComplete", function(e, xhr, settings){
afterLoad();
});
});
快速创建fiddle。这是你的意思吗?
编辑二:
您可能希望在DOM上有一个侦听器,用于显示的任何<form>
元素,然后运行您的afterLoad()
函数。这可能是一次性能损失,所以我会小心翼翼地使用它。
我使用livequery来执行此操作
$('form').livequery(function(){
afterLoad();
});
答案 1 :(得分:4)
您可以在jQuery中设置全局AJAX默认值
像这样$.ajaxComplete(function(){
afterLoad();
});
所以你的方法将在ajaxCompleted
时执行答案 2 :(得分:1)
这对我来说很好用:
$( document ).ajaxComplete(function( event,request, settings ) {
//your code here to run when ajax is complete
alert("Complete");
});
答案 3 :(得分:0)
如果我正确地阅读您的问题,问题是您在ajax调用之后但在将部分视图元素添加到DOM之前尝试发出'afterLoad'。在这种情况下,我认为你需要将afterLoad作为ajax加载方法的一部分来调用:
$('#ajaxTest').load('<MVC Route>', null,
function (responseText, textStatus, XMLHttpRequest)
{
afterLoad();
});
如果我离开基地,请告诉我,快乐的编码!
答案 4 :(得分:0)
删除ajaxSetup部分。
$.ajaxSetup({
/* success: function () {
afterLoad();
}*/
});
然后像这样使用load
:
$('#ajaxTest').load('<MVC Route>', function(){
afterLoad();
});
根据docs,这应该有用。
答案 5 :(得分:0)
罪魁祸首就是这个
$.ajaxSetup({
success: function () {
afterLoad();
}
});
load
在内部使用$.get
来获取数据,并且在调用成功处理程序afterLoad
时,在将数据设置为元素之前调用该方法。您可能不得不采用其他方法,但这不起作用。
试试这个
$.ajaxSetup({
complete: function () {
afterLoad();
}
});
答案 6 :(得分:0)
以上答案对我没有用。我浪费了很多时间去弄明白,一切都是徒劳的。最后,我得到了一个解决方案,虽然有点不寻常的方式。这里是。基本上我在从AJAX附加DOM元素后重新分配事件处理程序
function autoLoad(){
//write event handlers which you are again going to assign to the ajax appended dom elements
}
$(document).ready(function(){
autoLoad;
//more event handlers if present (non dynamic DOM elements)
//Any other Jquery stuff
});
$.ajax({
//send request here
}).done(function(html) {
//unbind the event handlers assigned in autoload function
append ajax results here
autoLoad();
}).fail(function(ts) {
});