Bootstrap modal popup confirmation prevent multipl

问题:

    $('button[name="remove_levels"]').on('click', function (e) {
        var $form = $(this).closest('form');
        e.preventDefault();
        $('#confirm').modal({
            backdrop: 'static',
            keyboard: false
        }).one('click', '#delete', function (e) {
            /*$(this).off(e);*/
            alert("Hello World");
        });
    });

<link href="//getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels"><span class="fa fa-times"></span> Click Here</button>

<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="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>

Above I have posted my code. Please check reference link click here

My Issue is when I have clicked multiple times of Cancel button then click on Delete button my alert Hello World is showing that number of times.

Eg.: Suppose I have clicked 3 times of Cancel button then I click on Delete button I got 4 times Hellow World alert.

Please help me.

回答1:

Your problem is you are stacking the one() event every time you open the modal.

Solution 1: Take away the click event from the modal initializing:

$('button[name="remove_levels"]').on('click', function (e) {
    var $form = $(this).closest('form');
    e.preventDefault();
    $('#confirm').modal({
        backdrop: 'static',
        keyboard: false
    })
});
    
$('#confirm').on('click', '#delete', function (e) {
    /*$(this).off(e);*/
    alert("Hello World");
});

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels"><span class="fa fa-times"></span> Click Here</button>

<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="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>

Solution 2: Play with a flag variable for not stacking the click event on the #delete button:

var fired = false;

$('button[name="remove_levels"]').on('click', function (e) {

      $('#confirm').modal({
          backdrop: 'static',
          keyboard: false
      });
      
      //When the flag is false declare the click event
      if(!fired) {
        //mark as fired
        fired = true;
        $("#delete").one('click', function (e) {
              /*$(this).off(e);*/
              alert("Hello World");
              //unflag so it can be fired again
              fired = false;
        });
      }
});

<link href="//getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels"><span class="fa fa-times"></span> Click Here</button>

<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="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>