Destory由djangos render_to_string填充的bootstrap 3.3.6模式

Question

描述

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

它的工作方式与描述相同，但仅适用于首次点击的项目。这意味着如果您关闭模态并单击另一个项目，您将始终获得第一个单击项目的信息。为了防止这种情况，我认为我需要以某种方式销毁模态，因此bootstrap需要创建一个新模式。

问题

我在使用Bootstrap 3.3.6完全破坏模态时遇到问题。 问题出在＆＃34;信息模板/模态内容＆＃34;

代码

项目模板（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,
            }
        )
    )

Answer 1

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

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

Answer 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

中有所描述