我这段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");

    });

})