Как предотвратить второй клик в JQuery?

Question

Это не дубликат jQuery предотвращает другие события после нажатия

В моем случае я использую плагин для отображения модального режима.Даже если я использую 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), а затем отобразить модальный режим, в противном случае не отображать его, и все.

Другими словами, возможно ли предотвратить 2-й щелчоксобытие для запуска (прикреплено в плагине)?

Спасибо.

Вот плагин

(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

Наконец, вот что я сделал:

Динамическое добавление атрибута данных на кнопку в зависимости от того, хочу ли я отобразить модальное значение:

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

Answer 2

Ваш обработчик событий click должен возвращать false, если вы хотите запретить запуск других обработчиков событий:

Сначала измените это:

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

Теперь ваш обработчик событий возвращает true (подтвердите другоеобработчики) или false (остановите другие обработчики событий).

Во-вторых, измените это:

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

Это должно помешать другим обработчикам событий, если вы вернете false;