ボタンをクリックすると複数回インクリメントして発砲する

Question

私は現在取り組んでいるウェブアプリを持っており、デモボタンを持つセクションにはモーダルを起動します。モーダルでは、確認するボタンとキャンセルするボタンが2つ追加されています。

モーダルが起動してボタンの1つをクリックすると、一度起動します。しかし、私の問題は、モーダルを終了して再び開いてボタンを再度クリックすると、ボタンが2回トリガーされるということです。これは処理を繰り返すと続けられ、次のクリックで3回のクリックなどが発生します。

私はunbindとoneをjQueryで使用しないようにしてみましたが、この時点で困っています。

ここに、該当するjQueryがあります。それが役に立ったら、私が使用しているハンドルバーファイルを添付することもできます。

jQueryの：それは

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

または

使用これを働くかもしれ

//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を動作するはずです複数のイベントハンドラを追加しているようです。

これを試してみてください：**（ 『クリック』）に$（「在庫」）**

$("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").on('click', 'button.deploy', function (event) { 
    evt.stopPropagation(); 
    evt.preventDefault();