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

Question

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