javascript - 将 PHP echo 放入按钮的 insideHTML 中不起作用

Question

我有一个像这样的 jQuery 代码:

$("#erase").click(function(){
        $("#erase").attr("disabled", "disabled"); // Prevent double-clicking
        $(this).html("Erasing...");
        $.post("erase.php", {target: $("#target").val(), criteria: $("#criteria").val()}, function(data){
            $(this).html(data); // Change the button's caption to whatever erase.php echoes.
            setTimeout(function(){
                window.location.href = "index.php";
            }, 3000);
        });

target 和 criteria 都是 HTML input 标记，并且按钮是使用 button 标记声明的。我预计当用户单击按钮时会发生这些情况:

1. 按钮将变灰，其文字将显示“正在删除...”
2. erase.php 将通过 AJAX 调用。 erase.php 将从数据库中删除一行，需要几秒钟才能完成。
3. 当 AJAX 调用完成时，按钮文本将是 erase.php 的输出。要么是“成功”，要么是“失败”
4. 3 秒后，用户将返回主页。

但就我而言，第 3 步失败了。按钮卡在“正在删除...”(但是，请求确实完成。)

<小时/>

旁注:我真的想不出这个问题更好的标题。如果你能为我想出一份。请在评论中告诉我。我将不胜感激。

Answer 1

$.post 中的 $(this) 不是您之前的那个。试试这个方法

$("#erase").click(function(){
    $("#erase").attr("disabled", "disabled"); // Prevent double-clicking
    $(this).html("Erasing...");
    $this = $(this);
    $.post("erase.php", {target: $("#target").val(),
           criteria: $("#criteria").val()}, function(data){
            $this.html(data); 
            setTimeout(function(){
                window.location.href = "index.php";
            }, 3000);
        });