hide.bs.modal在Bootstrap 3.2中沒有觸發w/Django 1.6.5（遠程模式內容）

我正在使用顯示主機列表的儀表板。當用戶點擊主機時，我想彈出一個模式對話框，其中包含有關該主機的其他詳細信息。我目前使用Bootstrap的遠程模式功能來觸發Django視圖並填充模式。該功能對於生成的第一個模式正常工作。之後，無論點擊哪個鏈接，每次都會顯示相同的模式。hide.bs.modal在Bootstrap 3.2中沒有觸發w/Django 1.6.5（遠程模式內容）

我發現這個問題的帖子在SO等地，這是建議的解決方案（使用jQuery）：

$('#hostDetail').on('hide.bs.modal', function(e) { 
    $(this).removeData('bs.modal'); 
});

我已經試過這樣做，但上面的代碼永遠不會觸發。我試着添加一個console.log（'hidden！'）來確認，但日誌從不顯示任何東西。控制檯中也沒有顯示任何錯誤。是否有一些簡單的事情，我忽略了這是阻止這些代碼的工作？它開始讓我瘋狂！

這裏是我的html，我稱之爲模式：

<a href="/portal/hostdetail/{{host.hostname}}" data-toggle="modal" host-name="{{host.hostname}}" data-target="#hostDetail">{{host.hostname}}</a>

這裏是模式本身（本地模式，而不是遠程之一）：

<div class="modal fade" id="hostDetail" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"></div> 
    </div> 
</div>

而且，我一直讀到'遠程'模式功能已被Bootstrap棄用，並且我應該使用jQuery的.load函數。如果是這種情況，並且沒有辦法修復我當前的代碼，那麼有人可以將我鏈接到一個很好的資源，以通過jQuery準確顯示如何執行此操作嗎？當談到jQuery和Javascript時，我非常喜歡noob，所以非常基本的東西會非常棒！

在此先感謝。

來源

2014-10-29 Paul Greene

我建議像[Knockout.js]（ http://knockoutjs.com/）而不是使用jQuery和服務器端模板。 – cvrebert 2014-10-29 23:23:58

我欣賞這個建議，但是即使使用Knockout [它看起來像]（http://stackoverflow.com/questions/22706765/twitter-bootstrap-3-modal-with-knockout）我仍然需要使用「.on（ 'hide.bs.modal'）「，這在我的例子中似乎沒有任何作用。任何想法爲什麼？ – 2014-10-30 14:24:10

我試着將檢測模態隱藏的jQuery腳本粘貼到遠程頁面中，並且它觸發得很好......唯一的問題是，「靜態」頁面上的高速緩存未被清除。如果我運行$（'＃hostDetail'）。removeData（'bs.modal'）;在Javascript控制檯中，這具有所需的效果。我的主要問題是我需要檢測何時「遠程」模式關閉，以便我可以在適當的時候觸發removeData函數。 – 2014-10-30 21:09:51

我最終重做了所有使用jQuery.load（）。這裏是所有相關的html/javascript。我敢肯定，代碼並不是那麼幹淨，因爲我是一個noob，但它的工作原理。

基頁HTML：

<td><a href="/portal/hostdetail/{{host.hostname}}" current_host="{{host.hostname}}" data-target="#hostDetail">{{host.hostname|upper}}</a></td> 

<div class="modal " id="hostDetail" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
       </div> 
       <div class="modal-body"> 

       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 

     </div> 
    </div> 
</div>

基頁的javascript：

$('a[data-target="#hostDetail"]').click(function(event) { 
    event.preventDefault(); 
    $("#hostDetail").modal('hide'); 
    var current_host = $(this).attr("current_host"); 
    var myModal = $('#hostDetail'); 
    var modalBody = myModal.find('.modal-content'); 
    // load content into modal 
    var remote = '/portal/hostdetail/' + current_host; 
    modalBody.load(remote, null, function (data) { 
     // display modal 
     myModal.modal('show'); 
     }); 

});

遠程頁面（模式）HTML：

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Remote file for Bootstrap Modal</title> 
</head> 
<body> 

    <div class="modal-header"> 
     Header text goes here 
    </div> 

    <div class="modal-body"> 
     Body text goes here 
    </div> 

    <div class="modal-footer"> 
     Footer stuff goes here 
    </div> 

</body> 
</html>

來源

2014-11-03 20:01:15

hide.bs.modal在Bootstrap 3.2中沒有觸發w/Django 1.6.5（遠程模式內容）

回答

相關問題