按钮在点击时递增和触发多次

Question

所以我有一个正在开发的网络应用程序，并且我有一个应用程序部分有一个部署按钮，它启动一个模式。在模式中，我还有两个按钮，一个用于确认，一个用于取消。

当模式启动并且我单击其中一个按钮时，它会触发一次。但是，我的问题是，如果我退出模式，重新打开它并再次单击一个按钮，它将触发该按钮两次。如果我重复这个过程，这种情况会继续，所以下一次点击会触发三次点击，依此类推。

我尝试在 jQuery 中使用 unbind 和 one 无济于事，此时我有点难过。

这是该部分的相关 jQuery。如果有帮助，我还可以附上我正在使用的车把文件。

jQuery：

 //open modal, present OK and Cancel buttons
$(".inventory").on('click', 'button.deploy', function () {
    console.log('DEPLOY')
    var machine = $(this).data("machine");
    var message = "Are you <b>SURE</b> you want to deploy the following machine:\n\n<b>" + $(this).data("machine") + "</b>";
    var newNetwork = $(this).parent().siblings(".select-option").find("option:selected").val();
    var currentDefault = $(this).parent().siblings(".select-option").attr('defaultValue');
    if (currentDefault !== newNetwork) {
        message += "\n\nChanging the network from: \n\n " + currentDefault + " -> <b>" + newNetwork + "</b>\n\n";
    }
    else {
        message += "\n\nRestarting  with the network:\n\n<b>" + currentDefault + "</b>\n\n";
    }
    message += "<i>NOTE: Any other network changes made to other machines will result in possible changes "
    message += "the next time there is a full deploy.</i>"

    $("#reset-message").html(message);
    $(".jquery-modal.blocker.current").show();
    $("div #reset-modal.modal").show();

    $("div #reset-modal").on('click', "#deploy-cancel", function () {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CANCEL')
    });

    $("div #reset-modal").on('click', "#deploy-confirm", function () {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CONFIRM')
    });

Answer 1

您似乎正在添加多个事件处理程序。

试试这个：

   $("div #reset-modal").off('click', "#deploy-cancel").on('click', "#deploy-cancel", function ()        {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CANCEL')
    });

    $("div #reset-modal").off('click', "#deploy-confirm").on('click', "#deploy-confirm", function () {
        $(".jquery-modal.blocker.current").hide();
        $("div #reset-modal.modal").hide();
        console.log('CONFIRM')
     });

Answer 2

使用它可能会起作用

$('.inventory').unbind().bind('click','button.deploy',function(){

或

使用它应该可以工作

$(".inventory").on('click', 'button.deploy', function (event) {
    evt.stopPropagation();
    evt.preventDefault();