javascript - 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:从模态初始化中去除点击事件:

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