Bootstrap模式弹出确认可防止多次单击

Question

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

上面我发布了我的代码。请查看参考链接click here

我的问题是，当我多次点击Cancel按钮，然后点击Delete按钮时，我的提醒Hello World显示了该次数。

例如：假设我点击了3次Cancel按钮，然后点击Delete按钮，我得到4次Hellow World提醒。

请帮帮我。

Answer 1

您的问题是，每次打开模式时，您都在堆叠one()事件。

解决方案1 ​​：从模态初始化中删除click事件：

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

解决方案2 ：使用标记变量播放，以便不在#delete按钮上叠加点击事件：

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>