如何防止自舉模態中的多觸發器？

Question

我點擊一個按鈕後顯示一個確認模式，在這個模式中有兩個按鈕，「取消」和「添加」。 「添加」會將數據擴展到自己的項目列表中，並且工作正常。但如果我點擊「取消」，然後再次顯示這個模式，如果我點擊「添加」，我的項目列表將被消耗的時間取決於我點擊「取消」之前多少次。我在.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

以下是問題：

功能的 「添加項目」
所有的代碼是內部功能爲添加項目，所以每當添加按鈕被要求顯示莫DAL中，模式對話框的添加按鈕的代碼也被執行..

jQuery的。一（）
將只執行一次，所以我對將在每一個被執行單擊「添加取而代之Modal的按鈕「

我已經從函數中取出了代碼並將其替換爲一個，現在它工作正常！ 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); 
});