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

Question

我想要动态加载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？

Answer 1

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

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

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