bootstrap ajax内容重新出现两次

Question

所以，我创建了一个带有bootstrap模式弹出窗口的应用程序。 例如我创建3步模式A，B和C，在模态A中我给出一个按钮继续模态B，以及在模态B中有一个按钮继续模态C。

有时单击该按钮时会加载以前的内容而不是下一个内容...例如，每个模态内容的文件都是

- modal1.html
- modal2.html
- modal3.html

在模态2中我单击continue按钮，它应该加载modal3.html但有时不是加载modal3.html它正在加载modal1.html

如何确保它正常工作？

编辑： 脚本调用modal1 / 2 / 3.html

$(".ajax-call").on("click", function(){
    var target = $(this).data("target");
    $(target).modal({
        remote: url
    });
});

触发

<a href="modal1/2/3.html" class="ajax-call" data-dismiss="modal" data-target="#MODAL_OR_#SUCCESS_MODAL">

Answer 1

在Bootstrap中加载第一个模态时，html将附加到它，直到您刷新页面，因此当您调用第二页时，仍会显示第一页的内容。有一个解决方案。将以下代码粘贴到脚本中。通过此，您从模型中删除内容，以便每次调用模态时都会加载新鲜内容。

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