bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

概述bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法 bootstrap的modal中，使用remote可以动态加载页面到modal-body中，并d窗显示

 

bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法

bootstrap的modal中，使用remote可以动态加载页面到modal-body中，并d窗显示

如果提供的是 URL，将利用 jquery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是两个实例：

<a data-toggle="modal" href="remote.HTML" data-target="#modal">Click me</a>

$("#myModal").modal({
remote: "/info?ID="+ID,
backdrop: 'static',
keyboard: false
});

但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据ID查询不同物品的详细信息，modal的数据是不能更新的，即使传的ID值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。

解决方法：监听modal的hIDden，当modal关闭时，即把数据清除即可。

代码如下

$("#myModal").on("hIDden",function() {
$(this).removeData("modal");
});
上面的代码基于 bootstrap v2，如果使用的是 bootstrape v3

$("#myModal").on("hIDden.bs.modal",function() {
$(this).removeData("bs.modal");
});

或者

$('body').on('hIDden.bs.modal','.modal',function () {
$(this).removeData('bs.modal');
});

或者

$(document).on("hIDden.bs.modal",function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});

或者

$(document).on("hIDden.bs.modal",".modal:not(.local-modal)",function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});

总结

以上是内存溢出为你收集整理的bootstrap模态框modal使用remote第二次加载显示相同内容解决办法全部内容，希望文章能够帮你解决bootstrap模态框modal使用remote第二次加载显示相同内容解决办法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。