Question

Possible Duplicate:
how to access the $(this) inside ajax success callback function

I can’t understand why this doesn’t work:

    $("body").on("click", "a.linky", function () {
        var contentID = $(this).attr("contentID");

        var jsongo = 'id=' + contentID;
        $.ajax({
            type: 'POST',
            url: '/Controller/Action/',
            data: jsongo,
            success: function (msg) {
                $(this).html(msg);
                alert(msg);

            }
        });

    });

I am able to display the alert, but I can’t set the html for the clicked link… Is there any way I can find the properties and methods from Elements from JQuery point of view? I find very confusing the reference from Jquery documentation.

What should be the correct way to set the content of the Link from the code above?

thanks

Answer 1

Try doing it this way

    $("body").on("click", "a.linky", function () {
        $this = $(this);
        var contentID = $(this).attr("contentID");

and then inside your ajax

  $this.html(msg);

to reference the right element

EDIT:

As explained more in the comments, it is happening because this inside the ajax call is not referencing back the element that triggered the event but rather the ajax settings. Please see the ajax documentation.

The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.