jQuery Bootstrap 模态动态内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21863462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal Dynamic Content
提问by KaekeaSchmear
I'm in need of a method to load dynamic content that can change at any time. According to the Bootstrap documentation
我需要一种方法来加载可以随时更改的动态内容。根据 Bootstrap 文档
<a data-toggle="modal" href="remote.htm" data-target="#modal">Click me</a>is making use of the jQuerys' .loadonly loading the content once. It injects the content in the modal-content div. As previously stated the content of this modal can be changed at any given time and therefore I need a different method. Any ideas?
正在使用jQuerys'的.load只加载内容一次。它在 modal-content div 中注入内容。如前所述，此模式的内容可以在任何给定时间更改，因此我需要一种不同的方法。有任何想法吗？
TL;DR - I'm looking for a method that will load dynamic content (remote) every time the modal opens instead of once (default Bootstrap modal).
TL; DR - 我正在寻找一种方法，每次打开模态时都会加载动态内容（远程），而不是一次（默认的 Bootstrap 模态）。
回答by Stephen Thomas
If your users can tolerate the delay, reload the content whenever the show event occurs.
如果您的用户可以容忍延迟，请在发生 show 事件时重新加载内容。
$('#modal').on('show.bs.modal', function(){
$.get("remote.htm", function(data){
$('#modal').find('.modal-content').html(data);
})
})
Add error handling and parameters as needed
根据需要添加错误处理和参数
回答by cvrebert
You can properly clear the modal's cache using:
您可以使用以下方法正确清除模态缓存：
$('#your-modal').removeData('bs.modal');
See https://github.com/twbs/bootstrap/pull/7935#issuecomment-21166069
You'd probably want to do that in an event handler for the modal's hidden.bs.modalevent.
请参阅https://github.com/twbs/bootstrap/pull/7935#issuecomment-21166069
您可能希望在模式hidden.bs.modal事件的事件处理程序中执行此操作。
Though you're probably better off using client-side templating and a little custom JavaScript to load the necessary data, instead of using data-remotein the first place. Especially since Bootstrap has deprecated the remotemodal option.
尽管您最好使用客户端模板和一些自定义 JavaScript 来加载必要的数据，而不是data-remote首先使用。特别是因为Bootstrap 已弃用remotemodal option。
回答by jakealbaugh
this guy has a dirty but working solution: http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/
这家伙有一个肮脏但有效的解决方案：http: //www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
becomes:
变成：
<a href="javascript:$('#modal .modal-body').load('remote.html',function(e){$('#modal').modal('show');});">Click me</a>
