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

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

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

$('#modal').on('show.bs.modal', function (e) {

$(this).load($(e.relatedTarget).data('url'));

});

原先在页面上已经存在：

唤起modal的按钮code为：

添加

modal内容是：

×

title

名称

关闭

保存

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？