Bootstrap modal只加載一次數(shù)據(jù)的解決辦法(推薦)
1. Bootstrap 模態(tài)對話框和簡單使用
<div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>對話框標題</h3> </div> <div class="modal-body"> <p>對話框主體</p> </div> <div class="modal-footer"> <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a> <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">確定</a> </div> </div>
可以使用按鈕或鏈接直接調(diào)用模態(tài)對話框，這是簡單的用法：
<button type="button" data-toggle="modal" data-target="#myModal">打開對話框</button> <a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打開對話框</button>
2. 使用 remote 選項讓模態(tài)對話框加載頁面到 .modal-body 中
有兩種方法，一種是使用鏈接，另一種就是使用腳本。
2.1 使用鏈接
<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打開對話框</a>
當點擊此鏈接時，page.jsp 的內(nèi)容會被加載到對話框的 .modal-body 中，隨即顯示對話框。
2.2 使用腳本
$("#myModal").modal({
remote: "page.jsp"
});
這段腳本的效果和使用鏈接是一樣的，當這段腳本執(zhí)行后，page.jsp 的內(nèi)容會被加載到對話框的 .modal-body 中，隨即顯示對話框。
這兩種方法的背后，都是 Bootstrap 調(diào)用了 jQuery 的 load() 方法，從服務(wù)器端加載了 page.jsp 頁面。但這個加載只會發(fā)生一次，后面不管你點擊幾次鏈接，或者執(zhí)行幾次腳本，哪怕改變傳遞給 remote 選項的值，對話框都不會重新加載頁面，這真是個讓人頭疼的事情。不過問題還是能夠解決的。
3. 移除數(shù)據(jù)，讓對話框能夠在每次打開時重新加載頁面
在搜索并查閱了相關(guān)文檔后，發(fā)現(xiàn)在對話框的 hidden 事件里寫上一條語句就可以了：
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
也可以在每次打開對話框之前移除數(shù)據(jù)，效果是一樣的。
注：上面的代碼基于 Bootstrap v2，如果使用 Bootstrape v3，模態(tài)對話框的 HTML 和事件的寫法有一些不同，例如對于上面的 hidden 事件，要寫成：
$("#myModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
總結(jié)
以上所述是小編給大家介紹的Bootstrap modal只加載一次數(shù)據(jù)的解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
用Javascript實現(xiàn)Windows任務(wù)管理器的代碼
在Windows系統(tǒng)上，自從98系統(tǒng)以來就提供了腳本宿主（Windows Scripting Host 簡稱WSH）的功能，WSH可以加載并運行JS和VBS腳本，并支持調(diào)用系統(tǒng)的COM組件，在COM組件的支持下腳本可以輕松實現(xiàn)非常強大的功能2012-03-03
constructor 屬性返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用。本文給大家介紹JavaScript中的constructor ，需要的朋友參考下吧2016-04-04
uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)
這篇文章主要為大家介紹了uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
這篇文章主要介紹了js過濾HTML標簽實現(xiàn)方法,以完整實例形式分析了JavaScript使用正則表達式過濾HTML標簽的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了微信小程序防止重復(fù)點擊按鈕的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了詳解使用webpack構(gòu)建多頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記，內(nèi)容很詳細，感興趣的小伙伴們可以參考一下2016-05-05
淺談layui 綁定form submit提交表單的注意事項
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript鍵盤事件的相關(guān)資料,鍵盤事件是指在網(wǎng)頁中當用戶按下鍵盤上的按鍵時所觸發(fā)的事件,在JavaScript中可以通過監(jiān)聽鍵盤事件來實現(xiàn)一些交互效果,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)移動端輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12