溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

詳解bootstrap的modal-remote兩種加載方式【強化】

發(fā)布時間：2020-10-06 11:58:16 來源：腳本之家 閱讀：200 作者：小柯丶尚好 欄目：web開發(fā)

方法一：

使用鏈接

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打開</a>

當點擊該連接時，demo.jsp的內(nèi)容就可以動態(tài)的加載到<div class="modal-content"></div>中。當然這里的連接也可以是controller

方法二：

使用腳本

$("#myModal").modal({  
  remote: "page.jsp"  
});

但是這樣加載后，會有問題，modal數(shù)據(jù)只加載一次，如果要加載不同的數(shù)據(jù)，例如根據(jù)id查詢詳細信息，modal的數(shù)據(jù)是不能更新的，即使傳的id值不同。其實解決辦法很簡單，只需要在加載下次數(shù)據(jù)前，將之前的加載的數(shù)據(jù)清除即可。

最簡單的方式就是監(jiān)聽modal的hidden，當modal關(guān)閉時，即把數(shù)據(jù)清除即可：

//v2 
$("#myModal").on("hidden", function() {  
  $(this).removeData("modal");  
});  
//v3 
$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
});

問題來了：如果在請求的頁面中有$()加載事件加載比如boostrap-validator或者boostrap-fileinput等插件會出現(xiàn)奇怪的現(xiàn)象，第一次正常執(zhí)行，關(guān)掉modal，第二次，$()的代碼沒有執(zhí)行，第三次能執(zhí)行；經(jīng)過反復(fù)發(fā)現(xiàn)“hidden.bs.modal”監(jiān)聽每次都執(zhí)行了，但是加載到<div class="modal-content"></div>里面的數(shù)據(jù)沒有被清除，可能是這個原因?qū)е碌倪@種現(xiàn)象，于是改成如下代碼：

$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
  /*modal頁面加載$()錯誤,由于移除緩存時加載到<span ><div class="modal-content"></div></span>未移除的數(shù)據(jù)，手動移除加載的內(nèi)容*/ 
  $(this).find(".modal-content").children().remove();  
});

如此這樣問題解決了！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手