.ajaxStart and .ajaxStop not firing for some odd reason

Question

I append a "Loading" class to the body when an ajax request is made so i could then display a progress animation... For some reason the functions ae never called and I see no alerts... ``` function setLoadingPanel() { var timer; var body = $("body"); alert("Set AJAX HOOKS..."); $("body").on({ ajaxStart: function () { alert("AJAX START"); //timer = setTimeout(function () { body.addClass("loading"); }, 50) }, ajaxStop: function () { alert("AJAX STOP!!!"); //$(this).removeClass("loading"); //clearTimeout(timer); } }); } ``` I have placed alerts to try and see if the hooks are called but no alert is poping for some reason. Here is my ajax request using a simple AJAX.ActionLink helper: ``` @{ var ajaxDialogoptions = new AjaxOptions() { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "DialogContainer", OnComplete = "OpenDialog('DialogContainer');" }; } @Ajax.ActionLink(Model.AddNewItemButtonTitle, Model.AddActionName, Model.AddActionController, Model.AddActionRou…

Accepted Answer

Try adding the ajaxStart- and ajaxStop-Handler to document like this:

```
$(document).ajaxStart(function () {
    alert("AJAX START");
    //timer = setTimeout(function () { body.addClass("loading"); }, 50)
});
$(document).ajaxStop(function () {
    alert("AJAX STOP!!!");
    //$(this).removeClass("loading");
    //clearTimeout(timer);
});
```

See here:

As of jQuery 1.8, however, the .ajaxStart() method should only be attached to document.

.ajaxStart and .ajaxStop not firing for some odd reason

Solution

Problem