Как вызвать функцию jQuery после ЛЮБОГО успешного запроса Ajax с частичным представлением MVC

Question

У меня есть код jQuery, который отлично работает при рендеринге представления.Однако я хочу, чтобы этот же код выполнялся после успешного выполнения Ajax-запроса.Изначально jQuery выполнялся, когда документ был готов, но я переместил его в его собственную функцию, чтобы его можно было вызывать.Функция добавляет несколько простых классов к некоторым элементам метки.Вот что у меня есть:

$(function () {
    afterLoad();
});

$.ajaxSetup({
    success: function () {
        afterLoad();
    }
});

function afterLoad() {
    // code to execute
}

Это не выполняется должным образом после выполнения простого Ajax-запроса:

$('#ajaxTest').load('<MVC Route>')

Частичное представление возвращается просто отлично, но afterLoad() пытается выполнить до того, как частичное представление находится в DOM.Если бы я должен был выполнить тот же вызов снова, afterLoad() действительно выполняется (в предыдущем частичном представлении), но затем он перезаписывается новым частичным представлением.

Есть мысли?Другой подход к этому был бы хорош, я искал, чтобы получить файл .js уровня сайта для запуска после Ajax-запроса для частичного просмотра.Главная страница загружает файл site.js, и я хотел бы выполнить его код без перезагрузки файла (так как он уже был загружен браузером).Кроме того, я не хочу заставлять разработчиков делать что-то другое с их вызовами Ajax, поэтому он должен работать с простыми .load() и т. Д.

Answer 1

Вот что я использую для того, что вы пытаетесь сделать:

У вас также есть доступ к объекту 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
});

EDIT: Это структура, которая у меня есть, которая работает на меня.

site.js

function afterLoad() {
    // code to execute
}
$(document).ready(function(){
    $("body").bind("ajaxComplete", function(e, xhr, settings){
           afterLoad();
    });
});

Создана быстрая скрипка . это то, что вы имеете в виду?

Редактировать два:

Возможно, вы захотите иметь прослушиватель в DOM для любого элемента <form>, который появляется, а затем запустите вашу функцию afterLoad(). Это может быть повышение производительности, поэтому я буду использовать его осторожно.

Я использую livequery , чтобы сделать это

$('form').livequery(function(){
    afterLoad();
});

Answer 2

Вы можете установить глобальные значения AJAX по умолчанию в jQuery

следующим образом

$.ajaxComplete(function(){
       afterLoad();
    });

, поэтому ваш метод будет выполняться, когда ajaxCompleted

Answer 3

Это прекрасно работает для меня:

$( document ).ajaxComplete(function( event,request, settings ) {
  //your code here to run when ajax is complete
  alert("Complete");
});

Answer 4

Приведенные выше ответы не сработали для меня. Я потратил много времени, чтобы понять это, все напрасно. Наконец я получил решение, которое работает, хотя и немного необычно. Вот. По сути, я переназначаю обработчики событий после добавления элементов DOM из AJAX

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) {
});

Answer 5

Виноват это

$.ajaxSetup({
  success: function () {
     afterLoad();
  }
});

load внутренне использует $.get для извлечения данных, и когда он вызывает обработчик успеха, вызывается метод afterLoad, прежде чем даже установить данные в элемент. Возможно, вам придется использовать другой подход, это не сработает.

Попробуйте это

    $.ajaxSetup({
      complete: function () {
         afterLoad();
      }
    });

Answer 6

Удалите часть ajaxSetup.

$.ajaxSetup({
/*  success: function () {
     afterLoad();
  }*/
});

А затем используйте load так:

$('#ajaxTest').load('<MVC Route>', function(){
       afterLoad();
    });

Согласно документам , это должно работать.

Answer 7

Если я правильно читаю ваш вопрос, проблема в том, что вы пытаетесь вызвать afterLoad после вызова ajax, но до того, как элементы частичного представления добавляются в DOM.В этом случае, я думаю, вам нужно вызвать afterLoad как часть метода загрузки ajax:

$('#ajaxTest').load('<MVC Route>', null, 
    function (responseText, textStatus, XMLHttpRequest) 
    { 
        afterLoad(); 
    });

Если я не в базе, дайте мне знать, счастливого кодирования!