CODEWITHSUNDEEP
triggersmodal-dialog
user2189138
user2189138

Reputation: 37

How to prevent multi triggers in bootstrap modal?

I have a confirm modal shown after a button clicked and in this modal has two buttons, "Cancel" and "Add". The "Add" will expend data into its own item list and it works fine. But if I click "Cancel" and then go back to show this modal again, if then I click "Add", my item list will be expended times depends on how many time I click "Cancel" before. I try .data("bs.modal", null) or .off('click') at .on("hidden.bs.modal"). None of them can fix my problem.

The sample 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>

the script,

$('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");
});

Upvotes: 1

Views: 113

Answers (1)

Pranav Maniar
Pranav Maniar

Reputation: 1565

Following were the problems :

Function for "Add Items"
All the code was inside function for Add Items, So whenever add button was getting called for displaying modal box, modal box's ADD button's code was also executing..

Jquery .one()
It will execute only one time, so I have replaced it with on which will be executed on every click to "Add button of Modal"

I have taken code out from the function and replaced one with on, now it works fine !!!

Updated fiddle can be found at : 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);
});

Upvotes: 1

Related Questions