在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; 

}）;

Answer 2

其他方法是預先生成並隱藏成功的圖標元素（例如類成功）。

當你到達服務器的成功響應時（任務已經完成），你只需隱藏鏈接元素並顯示成功的圖標。