帶有外部內容引導程序3的清除模式

Question

完全免責聲明-我對jQuery有點恐懼，我只是在跟引導程序打交道，希望能提供一些幫助。

我正在創建一個包含多個模式鏈接的頁面-這些鏈接會將外部內容加載到模式中。 我想使用相同的模式，然后重新加載內容。 但是內容沒有刷新-不管我單擊第二個鏈接以填充模態，還是存在第一次單擊中的內容。

在對SO進行了一些研究之后，我發現了具有相同（或相似）代碼段的各種答案，這些答案看起來非常簡單，並且適用於許多其他用戶。 但是我只是不能讓我的工作。 由於缺乏jQuery經驗，我感到自己犯了一個非常愚蠢的錯誤。

根據我的推斷，由於某種原因，該事件根本沒有觸發。 即使當我用簡單的警報替換功能時，它仍然不會觸發。

有人可以快速看一下並指出正確的方向嗎？

提前致謝。

<script>
    $(document.body).on('hidden.bs.modal', function () {
        $('#myModal').removeData('bs.modal')
    });
</script>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal Title</h4>

            </div>
            <div class="modal-body"><div class="te"><img class="img-responsive" style="margin:0 auto;" src="/img/loading.gif"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

編輯：創建了如下所示的獨立測試頁，以嘗試幫助某人發現我可能非常愚蠢的錯誤。

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<script>
$('#myModal').on('hidden.bs.modal', function () {
    alert('triggered')
});
</script>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal Title</h4>

            </div>
            <div class="modal-body"><div class="te"><img class="img-responsive" style="margin:0 auto;" src="/img/loading.gif"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

</body>

Answer 1

您需要將事件分配給#myModal

$('#myModal').on('hidden.bs.modal', function () {
    //do your thing here
});

檢查文檔： http : //getbootstrap.com/javascript/#modals

為您特別的jsfiddle我的朋友： http ： //jsfiddle.net/ys969vn5/

Answer 2

這將清空模態頁眉，正文和頁腳中的html。

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal .modal-header, #myModal .modal-body, #myModal .modal-footer').html('');
});

帶有外部內容引導程序3的清除模式

問題描述

2 個解決方案

解決方案1
3 已采納 2015-04-26 07:41:01

解決方案2
1 2015-04-26 07:36:02

帶有外部內容引導程序3的清除模式

問題描述

2 個解決方案

解決方案1 3 已采納 2015-04-26 07:41:01

解決方案2 1 2015-04-26 07:36:02

解決方案1
3 已采納 2015-04-26 07:41:01

解決方案2
1 2015-04-26 07:36:02