Schaltfläche inkrementieren und mehrere Male auf Klick auslösen

Question

So habe ich eine Webanwendung, an der ich arbeite, und ich habe einen Abschnitt der App, die über eine Schaltfläche zum Bereitstellen verfügt, die ein Modal startet. Im Modal habe ich zwei weitere Knöpfe, einen zum Bestätigen und einen zum Abbrechen.

Wenn das Modal startet und ich auf eine der Schaltflächen klicke, wird es einmal ausgelöst. Mein Problem ist jedoch, dass wenn ich das Modal wieder verlasse, es wieder öffne und erneut auf einen Button klicke, wird der Button zweimal ausgelöst. Dies wird fortgesetzt, wenn ich den Vorgang wiederhole, so dass der nächste Klick drei Klicks auslösen würde und so weiter und so fort.

Ich habe versucht mit unbind und one ohne Erfolg in jQuery und bin an dieser Stelle etwas ratlos.

Hier ist die relevante jQuery für diesen Abschnitt. Ich kann auch die Lenkerdatei anhängen, die ich benutze, wenn das helfen würde.

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

Ich arbeite Es scheint, als ob Sie mehrere Event-Handler hinzufügen.

Try this:

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

verwenden es dieses

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

oder

Gebrauch arbeiten können, sollten es

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