JQuery AJAX успеха не работает с $ (это)?

Question

Я играл с инструментами ajax в jQuery и у меня возникла проблема с использованием $ (this) при успешном выполнении моего ajax.Мне было интересно, возможно ли использовать $ (this) внутри вашего успеха, как я видел в учебниках, но когда я пытаюсь его использовать, он не работает ... Однако, если я использую $ (document) или какой-то другой метод, чтобы добраться дообъект, который я хочу, работает нормально ... Любая помощь будет принята с благодарностью, так как я новичок в jQuery!Заранее спасибо!Код, с которым я играю, выглядит следующим образом:

$(".markRead").click(function() {
    var cId = $(this).parents("div").parents("div").find("#cId").val();
    var field = "IsRead";

    $.ajax({
        type: "POST",
        url: "ajax/contract_buttons.php",
        dataType: "text",
        data: "contractId=" + cId + "&updateField=" + field,
        async: false,
        success: function(response) {
            //$(this) doesnt recognize the calling object when in the success function...
            $(this).find("img").attr("src", "images/read.png");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.statusText);
            alert(thrownError);
        }
    });
});

Answer 1

this всегда ссылается на текущий контекст выполнения, поэтому он не обязательно остается таким же в функции обратного вызова, как обработчик успеха ajax. Если вы хотите сослаться на него, вы должны просто сделать так, как указал Деннис, и сохранить его значение в вашей собственной локальной переменной, чтобы вы могли ссылаться на нее позже, даже когда фактическое значение this могло быть установлено в другое значение. Это определенно один из нюансов javascript. Измените свой код на это:

$(".markRead").click(function() {
    var cId = $(this).parents("div").parents("div").find("#cId").val();
    var field = "IsRead";
    var element = this;   // save for later use in callback

    $.ajax({
        type: "POST",
        url: "ajax/contract_buttons.php",
        dataType: "text",
        data: "contractId=" + cId + "&updateField=" + field,
        async: false,
        success: function(response) {
            //$(this) doesnt recognize the calling object when in the success function...
            $(element).find("img").attr("src", "images/read.png");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.statusText);
            alert(thrownError);
        }
    });
});