我想更改jquery中的特定按钮html文本，但它不起作用

Question

我想更改jquery中的特定按钮html文本，但它不起作用下面是我的jquery代码：

<script>

$(document).on('click','.track',function() {
var track_button_id = $(this).attr("id");
$.ajax({
url: 'order_track_Data.php',
method: 'POST',
data:{track_button_id:track_button_id},
cache:false,
beforeSend:function() {
$(this).html('<i class="fas fa-sync-alt"></i>');
},
success:function(data) {
$(this).html('<i class="fas fa-calendar-week"></i>');
alert(data.trim());
}
})
})
</script>

Answer 1

如果注释没有明确说明：

-注意你的数据对象也不正确

$(document).on('click','.track',function() {
// assign a variable to the current event target, for later use
let that = $(this);
var track_button_id = $(this).attr("id");
$.ajax({
url: 'order_track_Data.php',
method: 'POST',
// also, you will need to something about the data object
data:{'track_button_id':track_button_id},
cache:false,
beforeSend:function() {
$(this).html('<i class="fas fa-sync-alt"></i>');
},
success:function(data) {
// use the variable defined earlier
that.html('<i class="fas fa-calendar-week"></i>');
alert(data.trim());
}
})
})

Answer 2

**使用上下文更改html**

<script>

$(document).on('click','.track',function() {
var track_button_id = $(this).attr("id");
$.ajax({
url: 'order_track_Data.php',
method: 'POST',
data:{track_button_id:track_button_id},
cache:false,
context:this,
beforeSend:function() {
$(this).html('<i class="fas fa-sync-alt"></i>');
},
success:function(data) {
$(this).html('<i class="fas fa-calendar-week"></i>');
alert(data.trim());
}
})
})
</script>