按钮递增和射击多次点击

Button incrementing and firing multiple times on click

本文关键字：射击 按钮      更新时间：2023-09-26

我有一个web应用程序，我正在工作，我有一个部分的应用程序，有一个部署按钮，它启动一个模态。在模态中，我还有两个按钮，一个用于确认，一个用于取消。

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

我试过使用unbind和one在jQuery无效，我有点难倒在这一点上。

下面是该部分的相关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')
    });

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

试试这个:

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

使用它可能会起作用

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

或

用这个就可以了

$(".inventory").on('click', 'button.deploy', function (event) {
    evt.stopPropagation();
    evt.preventDefault();
相关文章：