Question

完全免责声明 - 我在jQuery上有点可怕，我只是搞乱了一下bootstrap并且会喜欢一点帮助。

我正在创建一个包含多个模态链接的页面 - 这些链接会将外部内容加载到模式中。我想使用相同的模态，只需重新加载内容。但内容并不令人耳目一新 - 无论我点击填充模式的第二个链接，第一次点击的内容都会出现。

经过对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://jsfiddle.net/ys969vn5/

我的朋友特别为你指出： {{3}}

Answer 2

这将清空模态标题，正文和页脚中的html。

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

使用外部内容Bootstrap 3清除模态

2 个答案: