javascript - 在 jQuery 中使用 ReplaceWith() 时出现奇怪的行为

Question

我在使用 jQuery 时遇到一些问题。我正在尝试执行 AJAX 请求，并在该请求给出正确响应时更改单击的元素。

我的 jQuery:

$(document).on('click', '.add-to-check', function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $.ajax({
        url: url,
        type: "GET",
        success: function (response) {
            var result = jQuery.parseJSON(response);
            if (result.status == 'success') {
                $(e.target).replaceWith('<i class="fa fa-check"></i>');
            } else if (result.status == 'failure') {
                // failure
            }
        },
    });
    return false;
});

我的 HTML:

<a class="btn btn-sm btn-primary pull-left add-to-check" href="/tasks/check/1235"><i class="fa fa-close"></i></a>

但这并不能正常工作。当我单击该按钮时，大多数时候该按钮会按应有的方式消失，并显示一个复选图标。这就是它应该工作的方式。

但是，有时:复选标记会显示，但它仍然是一个按钮。我不明白这是为什么。

Answer 1

尝试这样:

$(document).on('click', '.add-to-check', function (e) {
e.preventDefault();
var $this = $(this);
var url = $this.attr('href');
$.ajax({
    url: url,
    type: "GET",
    success: function (response) {
        var result = jQuery.parseJSON(response);
        if (result.status == 'success') {
            $this.replaceWith('<i class="fa fa-check"></i>');
        } else if (result.status == 'failure') {
            // failure
        }
    },
});
return false;

});