Question

它不是jQuery prevent other events after a click

的副本

就我而言，我使用插件来显示模式。即使我在unbind()函数中使用了deleteEntity，模态仍然显示。

我有一个按钮列表

<button name="deleteEntity">

我希望这些按钮执行删除操作，因此我附加了以下功能：

$('button[name="deleteEntity"]').click(function () {return deleteEntity($(this)) })

在deleteEntity函数中，这是我想要执行的操作

function deleteEntity(clickedEntity) {
    //Check if entity can be deleted 
    //If deletion is possible, display a modal form to confirm
    //Here return false for testing, modal is still displayed
    return false;
};

模式形式是一个插件。如果确认答案为是，则调用删除功能。这个插件就是这样附在按钮上的：

$('button[name="deleteEntity"]').confirm({
    confirmed: function() {
        delete();
    },
});

问题是我在按钮上附加了2个单击事件。我要实现的是是否可以删除实体（deleteEntity函数）然后显示模式，否则不显示它，仅此而已。

换句话说，是否有可能阻止第二次点击事件触发（附加在插件中）？

谢谢。

这是插件

(function ($) {
$.fn.confirm = function (options) {
    this.click(function (e) {
        e.preventDefault();

        var settings = $.extend({}, $.fn.confirm.defaults, {
            confirmed: function () { },
            cancelled: function () { }
        }, options);

        var modalHeader = '';
        if (settings.title !== '') {
            modalHeader =
                '<div class="modal-header">' +
                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                    '<h4 class="modal-title">' + settings.title + '</h4>' +
                '</div>';
        }
        var modalHTML =
            '<div class="modal fade" tabindex="-1" role="dialog">' +
                '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                        modalHeader +
                        '<div class="modal-body">'
                            + settings.text +
                        '</div>' +
                        '<div class="modal-footer">' +
                            '<button class="confirm btn btn-danger" type="button" data-dismiss="modal">Oui</button>' +
                            '<button class="cancel btn btn-secondary" type="button" data-dismiss="modal">Non</button>';
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';

        var modal = $(modalHTML);

        modal.find(".confirm").click(function () {
            settings.confirmed();
        });

        $("body").append(modal);
        modal.modal('show');
        return this;
    });
};

$.fn.confirm.defaults = {
    text: "Are you sure?",
    title: "",
}
}(jQuery));

Answer 1

如果您想阻止其他事件处理程序运行，您的单击事件处理程序应返回false：

首先，对此进行更改：

$('button[name="deleteEntity"]').click(function () { return deleteEntity($(this)) })

现在，您的事件处理程序返回true（继续处理其他事件）或false（停止其他事件处理程序）。

第二，更改此内容：

function deleteEntity(clickedEntity) {
    return entityCanBeDeleted; //return either true or false
};

如果您返回false，那应该避免其他事件处理程序；

Answer 2

最后，这就是我所做的：

根据我是否要显示模式，在按钮上动态添加data属性：

function deleteEntity(clickedEntity) {
    //Logic here (controller)

    if (isReadyToDelete)
    {
        clickedEntity.data("tobeconfirmed", "true");
    }
    else
    {
        clickedEntity.data("tobeconfirmed", "false");
    }
};

然后按如下所示修改插件：

var isModalToDisplay = ($(this).data("tobeconfirmed"));
if (isModalToDisplay=="true") {
    modal.modal('show');
}

如何防止JQuery中的第二次点击？

2 个答案: