替换与 on 已替换的元素

Question

我完全知道当您使用replaceWith()时，它会从 DOM 中删除元素并替换它，但是如何传递新创建的元素以便可以再次替换它？

例如，我有一个图标，其中包含这样的onclick=""事件

<i onclick="toggleStatus(true, this, '.$user->id.')" class="icon-red fas fa-times"></i>

然后，它运行以下函数，将图标替换为加载轮。当新的装载轮替换 DOM 中的此元素时，如何传递新创建的装载轮以便可以再次替换它？

这就是我到目前为止所拥有的

window.toggleStatus = function(status, elem, id){
var $i = $(elem);
//Replace the icon with a spinning wheel for effect
$i.removeClass().addClass('fa fa-spinner animation-spinning');
setTimeout(function(){
if(status){
$i.removeClass('fa fa-spinner animation-spinning').addClass('direct-debit-icon icon-green fas fa-check').attr('onclick','toggleStatus(false, this, '+id+')');
} else {
$i.removeClass('fa fa-spinner animation-spinning').addClass('direct-debit-icon icon-red fas fa-times').attr('onclick','toggleStatus(true, this, '+id+')');
}
},1000);
}

注意我必须使用replaceWith()并且不能只是使用 Font Awesome 5 将元素类更改为 im，因此<i>元素被替换为 SVG 的，如下所示

<svg onclick="toggleStatus(false, this, 1)" class="svg-inline--fa fa-check fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>

此问题已根据其中一个答案及其下面的评论进行了编辑

Answer 1

您根本不需要替换该元素。给定您的逻辑，您可以使用添加/删除/切换类修改单个<i>实例上的类。

另请注意，您应该使用不显眼的事件处理程序(特别是因为您已经在页面中包含 jQuery(而不是过时的on*事件属性。

综上所述，请尝试以下操作：

$('i').click(function() {
var $i = $(this);
var userId = $i.data('userid');
console.log(userId);

$i.removeClass('icon-red icon-green fa-check fa-times').addClass('fa-spinner fa-spin');

var status = Math.random() > 0.5; // just for testing
setTimeout(function() {
$i.removeClass('fa-spinner fa-spin');
if (status) {
$i.addClass('icon-green fa-check')
} else {
$i.addClass('icon-red fa-times');
}
}, 1000);
});

.icon-red { color: #C00; }
.icon-green { color: #0C0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
<i data-userid="abc-123" class="icon-red fas fa-times"></i>
<i data-userid="zxy-987" class="icon-red fas fa-times"></i>

请注意，上面使用的是 Font Awesome v5，因此animation-spinning类已更改为fa-spin