Почему $ (this) не определено после вызова ajax

Question

Я делаю ajax-запрос, когда щелкают тег привязки с идентификатором, установленным в href.Кстати, этот тег привязки создается динамически.

<a href="983" class="commentDeleteLink">delete</a>

При нажатии на тег привязки выполняется следующий код:

    $('.commentDeleteLink').live('click', function(event) {
        event.preventDefault();
        var result = confirm('Proceed?');

        if ( result ) {
            $.ajax({
                url: window.config.AJAX_REQUEST,
                type: "POST",
                data: { action       : 'DELCOMMENT',
                        comment      : $('#commentText').val(),
                        comment_id   : $(this).attr('href') },
                success: function(result) {
                    alert($(this).attr('href'));
                    //$(this).fadeOut(slow);
                }
            });
        }
    });

Когда я пытался отобразить $ (this) .attr('HREF') он говорит, что это "неопределено".Что я действительно хочу сделать, так это fadeOut тег привязки, но когда я исследовал значение $ (this), оно «неопределено».

Что может быть не так с приведенным выше фрагментом?

Answer 1

Контекст обработчика события click (объект, на который this ссылается в этом обработчике) не распространяется на ваш обратный вызов AJAX.

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

$.ajax({
    url: window.config.AJAX_REQUEST,
    type: "POST",
    data: {
        action: "DELCOMMENT",
        comment: $("#commentText").val(),
        comment_id: $(this).attr("href")
    },
    context: this,
    success: function(result) {
        $(this).fadeOut("slow");  // Works, since 'this' was propagated here.
    }
});

Answer 2

Вы должны попробовать

$('.commentDeleteLink').live('click', function(event) {
    event.preventDefault();
    var result = confirm('Proceed?');
    var that = this;
    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(that).attr('href'));
                //$(that).fadeOut(slow);
            }
        });
    }
});

, поскольку this в обратном вызове не является элементом, по которому щелкнули, вы должны кэшировать this в переменной that, которую вы можете использовать повторно и которая не чувствительна к контексту

Answer 3

$ (this) вызывается с помощью this внутри функции.Вот исправление:

$('.commentDeleteLink').live('click', function(event) {
    var myRef = this;

    event.preventDefault();
    var result = confirm('Proceed?');

    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(myRef).attr('href'));
                //$(this).fadeOut(slow);
            }
        });
    }
});

Answer 4

Изменение области действия внутри функции.

Кэшировать объект ссылки и ссылаться на него внутри запроса ajax.

Answer 5

Вы находитесь в функции AJAX, поэтому вам нужно сначала присвоить $(this) функции click переменной, если вы хотите использовать $(this) там

$('.commentDeleteLink').live('click', function(event) {
    ....
    var current = $(this);
    $.ajax({
        // You can use current here
    });
});