2017-06-23 16 views
0

我正在創建一組頁面,其中包含由ajax動態加載的部分。重建模式列表

每個加載的ajax頁面只是html內容幷包含一個模式。

我有tinyMCE編輯器有同樣的問題,但我已經通過清除編輯器數組中的所有編輯器並重新加載它們來修復該編輯器。

tinyMCE.editors = []; 
tinyMCE.init(); 

我期待着用Bootstrap Modals做類似的事情。據我所知,更新後的DOM並不知道引導程序,並且在最後放置一個腳本標記可以解決此問題,但通過這樣做,它還會引入問題,因爲腳本以前會爲頁面的以前部分加載(多個加載相同的腳本)。

我期待這樣做的原因是這樣的。

  • 創建按鈕打開模態
  • 莫代爾打開
  • 單擊關閉或模態的X,什麼都不會發生

關閉代碼:

<button type="button" class="close" data-dismiss="modal">&times;</button> 

我的開放代碼:

<a href="#" id="adminAdd" class="adminClicks btn btn-sm btn-success" data-toggle="modal" data-target="#addModal">Add<span class="glyphicon glyphicon-plus"></span></a> 

對話格:

<div id="addModal" class="modal fade" role="dialog"> 

任何意見將是巨大的。我已經使用了一種模式,它可以在頁面不被ajax更改的最高級別上正常工作。

回答

0

我想出了一個解決方法。

所以在這心不是受jQuery的靜態代碼我創造了這個:

<div id="customModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title" id="customModalHeader"></h4> 
      </div> 
      <div class="modal-body" id="customModalBody"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary pull-left">Add</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

然後我申請使用jQuery我需要的任何變化。我加了標識的多變的領域,所以我通過調整:

$("customModalHeader").html("My custom header"); 

在腳本標記之間的AJAX加載的部分。我可能也可能包含一個腳本文件,但這是即時更改。