Кнопка приращения и стрельбы несколько раз при нажатии

Question

Итак, у меня есть веб-приложение, над которым я работаю, и у меня есть раздел приложения с кнопкой развертывания, которая запускает модальный. В модальном режиме у меня есть еще две кнопки, одна для подтверждения и одна для отмены.

Когда модальный запуск и я нажимаю одну из кнопок, он срабатывает один раз. Тем не менее, моя проблема в том, что если я выйду из модального, снова откройте его и снова нажмите кнопку, он дважды запустит кнопку. Это будет продолжаться, если я повторю процесс, поэтому следующий щелчок вызовет три клика и т. Д. И т. Д.

Я пробовал использовать 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') 
    }); 

Answer 1

I t похоже, что вы добавляете несколько обработчиков событий.

Попробуйте это:

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