jquery - 即使在 ajax 调用之外将值分配给 DOM 之后，$(this) 也不会在 ajax 成功中触发

Question

已关注 these instructions

我将 this 分配给 var 元素

var element = this;

在 AJAX 调用之前，它工作正常并且被正确调用

$(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats fa-spin" id="'+id+'" url="'+url+'"></i>');

如果我尝试在成功回调中再次调用它，它不会触发

$(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats" id="'+id+'" url="'+url+'"></i>');

JQUERY

$(document).on('click', '.refresh-stats', function() {
    var id = $(this).attr('id');
    var url = $(this).attr('url');
    var element = this;
    $(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats fa-spin" id="'+id+'" url="'+url+'"></i>');
    $.ajax({
        type: "POST",
        url: "refresh-stats.php",
        data:({id: id, url: url}),
        success: function(data) {
            $(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats" id="'+id+'" url="'+url+'"></i>');
            var result = $.parseJSON(data);
            if (result[0] == 'No') {
                $('.indexed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[0] == 'Yes') {
                $('.indexed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
            if (result[1] == 'No') {
                $('.dindexed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[1] == 'Yes') {
                $('.dindexed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
            if (result[2] == 'No') {
                $('.removed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[2] == 'Yes') {
                $('.removed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
        }
    });
});

Answer 1

这是一个 XY 问题。

您可能只想更改类 - 并且您必须使用正确的类名 - 我使用了 .refresh-stats 因为您在 .refreshstats 上遇到了错误。

$(document).on('click', '.refresh-stats', function() {
    var id = this.id;
    var url = $(this).attr('url');
    var $element = $(this); // store the jQuery object
    $(this).addClass("fa-spin"); // set the spinner
    $.ajax({
        type: "POST",
        url: "refresh-stats.php",
        data:({id: id, url: url}),
        success: function(data) {
            $element.removeClass("fa-spin"); // remove the spinner

我还建议更改

中的文档

$(document).on('click', '.refresh-stats', function() {

到静态父元素的选择器，因为它更有效