javascript - 我這段bootstrap程式碼產生的Modal對話框，會被執行數次

Question

    //对话框
    //生成对话框
    function createDialog(){
      if ($("#dialog").length == 0){ 
        var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
        str += '<p class="modal-dialog">';
        str += '<p class="modal-content">';
        str += '<p class="modal-header">';
        str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        str += '<h4 class="modal-title">对话框</h4>';
        str += '</p>';
        str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
        str += '<p class="modal-footer">'
        str += '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
        str += '<button type="submit" class="btn btn-primary">确定</button>';
        str += '</p>'
        str += '</p>'
        str += '</p>'
        str += '</p>'
        $(str).appendTo('body');
      }
    }
    
    $('*[data-target="#dialog"]').click(function(){
      createDialog();
      $('#dialog').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
          case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
          break;
        }
      });
      //关闭对话框后清除modal中数据
      $("#dialog").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
      });
    })

html程式碼

    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialog" data-action="add">添加</button>

當點擊添加按鈕後，會先執行alert('1')，然後彈出對話框，我關閉對話框之後，再點擊添加，那麼這次的alert('1')會被執行兩次，也就是說我會收到2次警告框，但是modal對話框會等alert('1')執行完畢了彈出。如果再關掉Modal對話框，再點選按鈕，會執行3次alert('1')，以此類推。

那我是不是可以理解為，以下程式碼會因為點擊按鈕的次數而被執行多次。

    case 'add':
        modal.find('.modal-dialog').addClass('modal-lg');
        modal.find('.modal-title').text('添加用户');
        modal.find('.modal-body').html('这里是表单');
        modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
        alert('1'); //测试
      break;

那麼，我該如何解決這個問題？

Answer 1

其實還可以這麼解決，，我不是搞前端的，但是這種問題遇見

第一種：把事件放到click事件外去定義

$('*[data-target="#dialog"]').click(function(){
    createDialog();
})
$(document).on('show.bs.modal','#dialog', function (event) {
    var button = $(event.relatedTarget);
    var action = button.data('action');
    var modal = $(this);
    console.log(action);
    switch(action)
    {
        case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
            break;
    }
})
$(document).on("hidden.bs.modal","#dialog", function() {
    $(this).removeData("bs.modal");
})

第二種： 先移除事件再綁定事件

$('*[data-target="#dialog"]').click(function(){
    createDialog();
    $('#dialog').off('show.bs.modal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
            case 'add':
                modal.find('.modal-dialog').addClass('modal-lg');
                modal.find('.modal-title').text('添加用户');
                modal.find('.modal-body').html('这里是表单');
                modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
                alert('1'); //测试
                break;
        }
    });
    //关闭对话框后清除modal中数据
    $("#dialog").off("hidden.bs.modal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });
})

Answer 2

一直搞不明白這個問題出現的原因，現在我的暴力解決辦法是當關閉了對話框後remove()掉這個對話框，問題解決。

JS代碼

  //对话框
    //生成对话框
    function createDialog(){
      if ($("#dialog").length == 0){ 
        var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
        str += '<p class="modal-dialog">';
        str += '<p class="modal-content">';
        str += '<p class="modal-header">';
        str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        str += '<h4 class="modal-title">对话框</h4>';
        str += '</p>';
        str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
        str += '<p class="modal-footer">'
        str += '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
        str += '<button type="submit" class="btn btn-primary">确定</button>';
        str += '</p>'
        str += '</p>'
        str += '</p>'
        str += '</p>'
        $(str).appendTo('body');
      }
    }
    
    $('*[data-target="#dialog"]').click(function(){
      createDialog();
      $('#dialog').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
          case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
          break;
        }
      });
      //删除对话框
      $("#dialog").on("hidden.bs.modal", function() {
        $(this).remove();
      });
    })