javascript – Das von meinem Bootstrap-Code generierte modale Dialogfeld wird mehrmals ausgeführt

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-Code

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

Wenn ich auf die Schaltfläche „Hinzufügen“ klicke, wird zuerst die Warnung (‚1‘) ausgeführt, und dann wird ein Dialogfeld angezeigt. Nachdem ich das Dialogfeld geschlossen und dann auf „Hinzufügen“ geklickt habe, wird die Warnung (‘1‘) ausgeführt zweimal, das heißt, es heißt, dass ich zwei Warnfelder erhalte, aber das modale Dialogfeld wird angezeigt, nachdem die Warnung ('1') abgeschlossen ist. Wenn Sie das Modal-Dialogfeld schließen und erneut auf die Schaltfläche klicken, wird Alert('1') dreimal ausgeführt und so weiter.

Dann kann ich verstehen, dass der folgende Code je nach Anzahl der Klicks auf die Schaltfläche mehrmals ausgeführt wird.

    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;

Wie soll ich dieses Problem lösen?

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