Селектор $ (this) выдает jquery

Question

у меня есть эта простая функция jquery здесь. Нажав на кнопку, я хочу предупредить свой собственный класс перед ajax и снова после последовательности .. но селектор "$ (this)" в последней ситуациине работает, и предупреждение возвращается "undefined" ..

почему?

$(".button").live("click",function(){

alert($(this).attr('class')); //returns "button"
 $.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html)
    {
                alert($(this).attr('class')); //returns undefined

    }

});

Answer 1

Это заставит его работать:

$(".button").live("click", function() {

    var button = this;

    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html) {
            alert($(button).attr('class')); 
        }
    });

});

Нельзя использовать ссылку this во вложенных функциях. Функция success является вложенной функцией и имеет собственное значение this. Если вам нужна ссылка на кнопку внутри этой вложенной функции, вы должны объявить локальную переменную (например, button).

function clickHandler() {

    // this == element that was clicked

    function ajaxHandler() {

        // this != element that was clicked 

    }

}

Answer 2

Я бы сделал это следующим образом, сохраняя $(this) в переменной, чтобы вы могли использовать ее во всей функции, не выполняя каждый раз поиск jQuery, и вам также не нужно будет зависеть от области действия, чтобы предоставить правильнуюэлемент для $(this)

$(".button").live("click",function(){
    var button = $(this);
    alert(button.attr('class')); //returns "button"
    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html)
        {
            alert(button.attr('class')); //should also return "button"

        }
    });
});

упаковки this только один раз также является улучшением производительности

Answer 3

Попробуйте добавить var self = $(this); при объявлении функции, а затем использовать self вместо $(this)

Итак, ваш код выглядит следующим образом:

$(".button").live("click",function(){

var self = $(this);

alert($(this).attr('class')); //returns "button"
 $.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html)
    {
                alert(self.attr('class')); //returns undefined

    }
});

Answer 4

Вы можете либо добавить свойство context: this к хешу, который передается в вызов $.ajax, таким образом дескриптор success будет правильно задан контекст, либо вы также можете сделать что-то вроде:

success: $.proxy(function(html) {  // using $.proxy will bind the function scope to this
    alert($(this).attr('class'));
}, this);

или другая техника, которую я видел:

$(".button").live("click",function(){
    var self = this;
    alert($(self).attr('class')); //returns "button"
    $.ajax({
        type: "POST",
        url: myUrl,
        data: myData,
        cache: false,
        success: function(html)
        {
                alert($(self).attr('class')); //returns undefined

        }
});

Answer 5

Взгляните на context раздел здесь . По сути, в вашем коде происходит то, что ссылка на this больше не применяется. Имеет смысл, учитывая, что контекст кода перемещается, пока обратный вызов AJAX обрабатывается асинхронно. Явная установка context для конкретного объекта в вызове .ajax() будет содержать ссылку на контекст в функцию обратного вызова.

Answer 6

$(this) существует только при ссылке на объект HTML в DOM.Поскольку вы пытались использовать в функции успеха вызова AJAX, $(this) не имеет ссылки.Так, например, в следующем коде $(this) относится к элементу, возвращаемому селектором jQuery:

$('.button').each(function() {
    alert($(this));
});

. Вам потребуется использовать селектор, чтобы вернуть элемент в глобальной области видимости, а затем передать егок функции успеха в вызове AJAX:

var myButton = $('.button');

$.ajax({
    type: "POST",
    url: myUrl,
    data: myData,
    cache: false,
    success: function(html) { alert(myButton.attr('class')); /* returns button */ }
});

Answer 7

Многие люди опубликовали решение для этого, поэтому я не буду публиковать код.Я просто хотел упомянуть причину, потому что, поскольку метод успеха является обратным вызовом, ваш контекст $ (this) больше не действителен.Поэтому вам необходимо присвоить его переменной и сохранить для собственного использования.