Why can't I access $(this) in ajax success

Question

The issue is pretty straight forward, I can not reference $(this) in the success section of my jQuery ajax call, for example this does not work (to hide the clicked element):

    $('.assigned').click(function (event) {
        event.preventDefault();

        $.post("@Url.Action("method", "controller")",
        {
            TicketId: $(this).data("ticketid"),

        },
        function (data, status) {

            $(this).hide();
        });

    });

its worth noting the data is sent. However this hides the element just fine:

    $('.assigned').click(function (event) {
        event.preventDefault();
        $(this).hide();
        $.post("@Url.Action("method", "controller")",
        {
            TicketId: $(this).data("ticketid"),

        },
        function (data, status) {



        });

    });

Why is this happening?

Tested in FireFox

`"@Url.Action("method", "controller")"` Double quotes in double quotes. Don't you have syntax colors? The console must be yelling — Jeremy Thille, Mar 16 '15 at 15:56
@JeremyThille : this is ASP.NET Razor syntax. `@Url.Action()` method is executed on server-side and generates a fully qualified URL. ([more information about Razor](http://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-%28c%29)) — Guy, Mar 16 '15 at 16:02

score 2 · Accepted Answer · answered Mar 16 '15 at 15:55

You have to ask yourself, where are you in this code? What would this apply to?

You are currently in:

function(data, status){

}

or:

$.post("@Url.Action("method", "controller")",
            {
                TicketId: $(this).data("ticketid"),

            }

Thus this would apply to your function and not to your element.

Just do:

$('.assigned').click(function (event) {
        event.preventDefault();
        var $this = $(this);
         $this.hide();
        $.post("@Url.Action("method", "controller")",
        {
            TicketId: $this.data("ticketid"),

        },
        function (data, status) {

            $this //will work here

        });

    });

score 0 · Answer 2 · answered Mar 16 '15 at 15:56

Assign this to a variable on click and then hide it using the variable:

$('.assigned').click(function (event) {
    event.preventDefault();
    var $t = $(this);
    $.post("@Url.Action("method", "controller")",
    {
        TicketId: $(this).data("ticketid"),

    },
    function (data, status) {
        $t.hide();
    });

});

Why can't I access $(this) in ajax success

2 Answers2