【问题标题】：Destory a bootstrap 3.3.6 modal that's filled by djangos render_to_string销毁由 django render_to_string 填充的引导程序 3.3.6 模式
【发布时间】：2016-05-06 12:47:35
【问题描述】：

说明

我有一个包含多个项目的页面，每个项目都有一个信息按钮。如果单击此按钮，模式会淡入，并且应显示有关单击项的更多信息。

它的工作方式与描述的一样，但仅适用于第一个点击的项目。这意味着如果您关闭模式并单击另一个项目，您将始终从第一个单击的项目中获得信息。为了防止这种情况发生，我认为我需要以某种方式破坏模式，因此引导程序需要创建一个新模式。

问题

我在使用 Bootstrap 3.3.6 完全破坏模式时遇到问题。问题出在“信息模板/模态内容”

代码

项目模板（items.html）

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
        </div>
    </div>
</div>
{% for item in items %}
    <a href="{% url 'info' item.id %}"
        data-toggle="modal"
        data-target="#modal"
        title="info item" data-tooltip>
        <span class="glyphicon glyphicon-info"></span>
    </a>
{% endfor %}

信息模板/模态内容（info.html）

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times</button>
    <h4 class="modal-title">Info</h4>
</div>
<div class="modal-body">
    <p>Info about "{{ item }}"...</p>
    <!-- PROBLEM PART: Should destory the modal... -->
    <script>
        $('body').on('hidden.bs.modal', '.modal', function(){
            $(this).removeData('bs.modal');
        });
    </script>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

views.py

def info_item(request, **kwargs):
    item = Items.objects.get(id=kwargs.get("item_id"))
    return HttpResponse(
        render_to_string(
            "info.html",
            {
                "item": item,
            }
        )
    )

【问题讨论】：

你在哪里添加多个项目？是另一种观点吗？
@AKS 我更新了代码（添加了项目循环）
我还是看不到 1) 哪个文件是 info.html，2) Info template/Modal content 文件是如何包含在其中的。
@AKS info.html 是Info template/Modal content。它被render_to_string“包含”在views.py中
您需要从info.html 中删除您的<script> 标签并将其添加到items.html。请尝试并告诉我。

标签： javascript jquery django twitter-bootstrap-3

【解决方案1】：

bs.modal 不是一个类。 hidden.bs.modal 是在模式关闭时触发的自定义事件。您可能想清空 .modal-content 的内容。

    $('body').on('hidden.bs.modal', '.modal', function(){
        $(this).parents('.modal-content').empty();
    });

【讨论】：

与此行为相同

【解决方案2】：

解决方案

为了解决我的问题，我现在 .load items.html 中的内容由

<a href="{% url 'info' item.id %}"
    onclick="$('.modal-content').load('{% url 'info' item.id %}');"
    data-toggle="modal"
    data-target="#modal">
    <span class="glyphicon glyphicon-info"></span>
</a>

而不是仅使用 bootstraps 集成的 js。

<a href="{% url 'info' item.id %}"
    data-toggle="modal"
    data-target="#modal"
    title="info item" data-tooltip>
    <span class="glyphicon glyphicon-info"></span>
</a>

我删除了 info.html 中的脚本部分。

问题在http://getbootstrap.com/javascript/#modals-options中描述

【讨论】：