Wie verhindert man Multi-Trigger in Bootstrap-Modal?

Question

Ich habe ein Bestätigungsmodal nach einem Klick geklickt und in diesem Modal hat zwei Tasten, "Abbrechen" und "Hinzufügen". Das "Hinzufügen" wird Daten in seine eigene Artikelliste ausgeben und es funktioniert gut. Aber wenn ich auf "Abbrechen" klicke und dann zurück gehe, um dieses Modal wieder zu zeigen, wenn ich dann auf "Hinzufügen" klicke, wird meine Artikelliste mal aufgezehrt, je nachdem wie lange ich vorher auf "Abbrechen" klicke. Ich versuche .data ("bs.modal", null) oder .off ('click') bei .on ("hidden.bs.modal"). Keine von ihnen kann mein Problem beheben.

Die Probe Link 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> 

das Skript,

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

wurden nach den Probleme:

Funktion für "Add Item"
der Code innerhalb Funktion Alles war für Add Items, also wann immer die Schaltfläche add für die Anzeige von mo aufgerufen wurde dal Feld Code modale Box ADD-Taste wurde auch die Ausführung ..

JQuery .one()
Es wird nur ein einziges Mal ausführen, so habe ich es ersetzt mit, an dem auf jeder ausgeführt wird klicken auf „Add Button of Modal "

Ich habe Code aus der Funktion genommen und einen mit einem ersetzt, jetzt funktioniert es gut !!! 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); 
});