使用bootstrap modal.load()加载的js,第二次modal显示的时候,js不生效?

yearnwilling
  • 7

我想要动态加载modal内的内容(一个模版,里面包含加载js文件),

我使用load(),在modal显示的时候进行ajax加载,js如下:

$('#modal').on('show.bs.modal', function (e) {
    $(this).load($(e.relatedTarget).data('url'));
});

原先在页面上已经存在:

    <div id="modal" class="modal fade" name="tip-modal" data-backdrop="static" data-keyboard="false"></div>

唤起modal的按钮code为:

    <a type="button" data-url="/add" class="btn btn-block btn-success btn-sm" data-toggle="modal" data-target="#modal"><i class="glyphicon glyphicon-plus"></i>添加</a>

modal内容是:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">title</h4>
        </div>
        <div class="modal-body">
        <form id="add" action="/add" method="post">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="名称">
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="add_submit" class="btn btn-primary show-primary">保存</button></div>        
    </div>
    <script src="/js/app/add.js"></script>
</div>

add.js:

$('#add_submit').on('click', function () {
    $("#community_add").submit();
});

$("#add").validate({
    submitHandler: function (form) {
        let options = {
            success: function (data) {
                $('#modal').modal('hide');
                notify.success(data.msg);
                setTimeout('window.location.reload()',2000);
            },
            error : function (res) {
                if (res.status == 422) {
                    let errors = res.responseJSON;
                    let errorMsg = '';
                    $.each(errors, function (key, value) {
                        errorMsg += value +'';
                    })
                    notify.danger(errorMsg,3);
                } else {

                }
            }
        };
        $(form).ajaxSubmit(options);
    },
    rules: {
        name: "required",
    },
    messages: {
        name: "名称不能为空",
    }
});

我点一次点击添加按钮时,能够正常加载js,和modal内的内容,而且点击提交后,能够正常提交。
但是当我没有点提交,而是关闭modal后,再次点击添加,展示的modal内容是存在的,但是,点击提交并没反应,jquery-validata也失效了。我确认过add.js第二次点击时还是被加载出来的。
为什么第二次显示的modal无法执行js?

回复
阅读 9.1k
1 个回答

可以添加bootstrap-modal的事件,在隐藏时清空modal,然后在加载,应该就ok了,我用的是bootstrapvalidate,也有一样的问题,这样做就ok了。
$('#modal-container').on('hidden.bs.modal', function() {

form.data('bootstrapValidator').destroy();
form.data('bootstrapValidator', null);

});
你可以查下jqueryvalidate的文档,看下是否有类似的销毁方法。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏