javascript - 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
    });
});

编辑:更新答案以反射(reflect)将事件绑定(bind)到动态添加的按钮所需的更改。