Question

I have a native JavaScript object, that I would like to assign the .ajaxSuccess callback to. The purpose of this is because I want my data model to update after an ajax call succeeds, but I don’t want to make my data model global to the entire JavaScript file. And yes, I checked to make sure my jQuery is included before my script file.

Here is the code:

$("#formButtonAddLink").click(function() {
    $.ajax({
        type: "POST",
        url: "ajax/addlink",
        data: {content: $("#formInputLinkContent").val(), subject: $("#formInputLinkSubject").val()},
        dataType: "json",
        error: function() {
            alert("An ajax error occured adding link")
        }
    });
    return false; //prevents html form submit
})

$(document).ready(function(){
    var links = new Links(20,0);
    $(links).ajaxSuccess(function() {
        console.log("Hey.")    //This does not work.
    });
    $(document).ajaxSuccess(function() {
        console.log("Document hey.")   //This shows up.
    });
});

Answer 1

The basic idea of ajaxSuccess() is:

Whenever an Ajax request completes successfully, jQuery triggers the
ajaxSuccess event. Any and all handlers that have been registered with
the .ajaxSuccess() method are executed at this time.

As far as I understand it from the documentation you can only attach the ajaxSuccess() event handler to an element, not a JavaScript object. That is why it works when attaching the event handler to the document.

We can attach our event handler to any element.

In this case if you have something similar to:

<div class="links"></div>

You could do:

$(document).ready(function(){
    $(".links").ajaxSuccess(function() {
        console.log("Hey.")
        // use links in here:
        var links = new Links(20,0);
    });
});