ブートストラップモーダルでマルチトリガを防止する方法は？

Question

ボタンをクリックした後に確認モーダルが表示され、このモーダルでは「キャンセル」と「追加」の2つのボタンがあります。 "追加"は、独自のアイテムリストにデータを費やし、正常に動作します。しかし、「キャンセル」をクリックして再びこのモーダルを表示すると、「追加」をクリックすると、アイテムリストが消費される時間は、前に「キャンセル」をクリックした回数に依存します。 .on（ "hidden.bs.modal"）で.data（ "bs.modal"、null）または.off（ 'click'）を試します。彼らの誰も私の問題を解決することはできません。

サンプルリンクSample

<div class="major"> 
    <button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button> 
    <ul id="itemlist" data="0"> 
    </ul> 
</div> 
<div class="major"> 
    <button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button> 
    <ul id="itemlist" data="100"> 
    </ul> 
</div> 

<!-- Modal --> 
<div id="confirm" class="modal hide fade"> 
    <div class="modal-body"> 
    Are you sure? 
    </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn btn-primary" id="add">Add</button> 
     <button type="button" data-dismiss="modal" class="btn">Cancel</button> 
    </div> 
</div> 

スクリプト、

$('button[name="additem"]').on('click', function(e){ 
    var $major=$(this).closest('.major'); 
    e.preventDefault(); 
    $('#confirm').modal({ backdrop: 'static', keyboard: false }) 
    .one('click', '#add', function (e) { 
     var num = parseInt($major.children("#itemlist").attr("data")) + 1; 
     $major.children("#itemlist").append("<li>new item" + num + "</li>"); 
     $major.children("#itemlist").attr("data", num); 
    }); 
}); 

$("#confirm").on("hidden.bs.modal", function(){ 
    $(this).data("bs.modal", null); 
    $("#add").off("click"); 
}); 

Answer 1

後は問題だった：すべてのコードは、関数の中にあった
"アイテムを追加" ため

機能項目を追加するため、moを表示するために追加ボタンが呼び出されるたびにDALボックス、モーダルボックスの追加ボタンのコードも実行していた。..

jQueryの.one（）
「追加する]をクリックそれは一度だけ実行されますので、私はすべての上で実行される上でそれを交換しましたモーダルのボタン "

私は関数からコードを取り出し、オンで置き換えました、今それはうまく動作します！ uはフィドルを作成したり、問題のためにplunkできhttp://jsfiddle.net/L3ddq/732/

var $major ; 
$('button[name="additem"]').on('click', function(e){ 
    $major=$(this).closest('.major'); 
    e.preventDefault(); 
    $('#confirm').modal({ backdrop: 'static', keyboard: false }); 
}); 

$('#confirm').on('click', '#add', function (e) { 
    var num = parseInt($major.children("#itemlist").attr("data")) + 1; 
    $major.children("#itemlist").append("<li>new item" + num + "</li>"); 
    $major.children("#itemlist").attr("data", num); 
});