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