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;

}）;

Answer 2

其他方法是预先生成并隐藏成功的图标元素（例如，使用类成功）。

当您从服务器获得成功响应时（因为任务已完成），您只需隐藏链接元素并显示成功图标。

在jQuery中使用replaceWith（）时的奇怪行为

2 个答案: