JQuery - 使用插件删除一行内容以确认

Question

我有这个标记：

<div class="form-group conteiner">
    <div class="row">
        <div class="col-md-2">
            <label for="date">Date:</label>
            <div class="input-group date datetimepickaa"  id="datetimepickerloop1" data-date-format="YYYY/MM/DD">
            <input type="text" class="datetimepickaa"  data-date-format="YYYY/MM/DD"  class="datetimepickaa" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
        <div class="col-md-9">
            <label for="notes">Notes:</label>
            <textarea class="form-control autosize" id="" name="">Lorem ipsum dolor sit amet.</textarea>
        </div>
        <div class="col-md-1">
        <button type="button" class="removee" >Delete</button>
        </div>
    </div>
</div>

当您单击“删除”按钮时，我正在使用此 JQuery 代码删除一行内容：

$("button.removee").click(function(){
    $(this).closest(".conteiner").remove();
});

我想使用这个 JQuery 来请求确认： http://myclabs.github.io/jquery.confirm/

在文档中，它说我们需要像这样使用插件：

$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        // do something
    },
    cancel: function(button) {
        // do something
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: false
});

我正在尝试使用与我的代码混合的插件进行删除：

$("button.removee").confirm({
    text: "Are you sure you want to delete this row?",
    title: "Confirmation required",
    confirm: function() {
        $(this).closest(".conteiner").remove();
    },
    cancel: function() {
        // do something
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: false
    });

在这一行中，(this) 不再指代 $("button.removee")：

$(this).closest(".conteiner").remove();

所以，它不工作。你对如何做到这一点有任何线索吗？

先谢谢了！！

Answer 1

未经测试，但这可能会奏效。在触发确认框之前保存每个按钮的按钮实例。

$(document).on("click", "button.removee", function()
{
    var btn = $(this);

    $(this).confirm({
        text: "Are you sure you want to delete this row?",
        title: "Confirmation required",
        confirm: function() {
            btn.closest(".conteiner").remove();
        },
        cancel: function() {
            // do something
        },
        confirmButton: "Yes I am",
        cancelButton: "No",
        post: false
    });
});

编辑：更新答案以反映将事件绑定到动态添加的按钮所需的更改。

Answer 2

尝试使用此代码

$("button.removee").confirm({
text: "Are you sure you want to delete this row?",
title: "Confirmation required",
confirm: function() {
    $("button.removee").closest(".conteiner").remove();
},
cancel: function() {
    // do something
},
confirmButton: "Yes I am",
cancelButton: "No",
post: false
});