javascript - 我这段bootstrap代码生成的Modal对话框，会被执行数次

问题描述

问 题

    //对话框
    //生成对话框
    function createDialog(){
      if ($("#dialog").length == 0){ 
        var str = '<div class="modal fade" id="dialog" tabindex="-1" role="dialog">';
        str += '<div class="modal-dialog">';
        str += '<div class="modal-content">';
        str += '<div 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 += '</div>';
        str += '<div class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></div>';
        str += '<div 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 += '</div>'
        str += '</div>'
        str += '</div>'
        str += '</div>'
        $(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;

那么，我应该如何解决这个问题？

解决方案

其实还可以这么解决，，我不是搞前端的，但是这种问题遇见过

第一种：把事件放到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");
    });
})

这篇关于javascript - 我这段bootstrap代码生成的Modal对话框，会被执行数次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！