Question

我有一个带有一堆项目的表，我创建了一个删除行的函数，但是想使用模态来确认用户实际想要删除一行。

我的删除功能如下：

var removeFootable_row = function() {
    var $this, $currentFooTable, $currentTable, $currentRow;
    $this = $(this);
    $currentFooTable = $this.parents("table").data("footable");
    $currentTable = $this.parents("table");
    $currentRow = $this.parents("tr");

    $("#confirm-modal").modal("show");


    // I WANT TO PAUSE HERE AND ONLY CONTINUE IF THE USER CLICKS THE YES BUTTON


    $currentRow.animate({opacity:0},{
        duration:150,
        queue:false,
        complete:function() {
            setTimeout(function() {
                $currentFooTable.removeRow($currentRow);
            }, 250);
        }   
    });
};

我读了一些关于承诺和推迟的内容，但我真的不确定最好的方法是什么，任何想法？提前感谢您提供任何帮助。

Answer 1

另一位用户已经给你答案了。你必须像这样拆分你的功能。

// Global variable
var $rowToDelete;

function askUserConfirmation() {
    var $this, $currentFooTable, $currentTable, $currentRow;
    $this = $(this);
    $currentFooTable = $this.parents("table").data("footable");
    $currentTable = $this.parents("table");
    $currentRow = $this.parents("tr");
    $rowToDelete = $currentRow;
    $("#confirm-modal").modal("show");
}

这将显示您的模态要求确认。现在，将“Okay”按钮附加到实际删除行的功能。（由于你没有发布关于你的模态窗口的任何代码，我将使用我自己的id。你必须为你的更改它们）

function removeFootableRow() {
     $rowToDelete.animate({opacity:0},{
         duration:150,
         queue:false,
         complete:function() {
             setTimeout(function() {
                 $currentFooTable.removeRow($currentRow);
             }, 250);
         }   
     });
}

将功能附加到按钮上。 HTML：

<!-- "Okay" button of your modal -->
<input type="button" id="btnDeleteRow" />

使用JQuery附加它：

$('#btnDeleteRow').off('click');
$('#btnDeleteRow').on('click', function () {
    removeFootableRow();
});

就是这样。这将有效。

具有函数的查询等待用户单击是或取消

1 个答案: