部分ajax加载后引导模式未触发答案

【问题标题】：Bootstrap modal not firing following partial ajax load部分ajax加载后引导模式未触发
【发布时间】：2013-10-03 12:29:28
【问题描述】：

我正在将 Bootstrap 与最新版本的 jQuery 一起使用，并且在通过 Ajax 部分更新页面后显示模式时遇到问题。

在 60 秒后 UpdateRegister 函数运行之前，模态多次触发，之后当我单击按钮打开时收到“0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法‘模态’”再次使用模态。

触发模式的按钮 ('#cmdAdd') 位于由 Ajax 调用更新的 Div 之外。

javascript如下：

$(function() {
    // Display Add Visitor modal
    $("#cmdAdd").on("click", function () {
        var url = "/Visitor/Add/";
        $.get(url, function (data) {
            $("#myModal").html(data);
            $('#myModal').modal('show');
        });
    });
    // Update register every 60 seconds
    setInterval(function () {
        UpdateRegister();
    }, 60000);
});

function UpdateRegister() {
    var currentDate = new Date();
    var day = currentDate.getDate();
    var month = currentDate.getMonth() + 1;
    var year = currentDate.getFullYear();
    var thisDate = month + "/" + day + "/" + year;

    var url = "/Visitor/RegisterList?date=" + thisDate + "&filter=current";
    $.get(url, function (data) {
        $("#RegisterList").html(data);
    });
}

HTML如下：

<div class="row">
    <div class="col-lg-12">

        <h2>@Model.Date.DayOfWeek @Model.Date.ToLongDateString()</h2><br />

        <div class="btn-group pull-right">
            <button type="button" class="btn btn-danger" id="cmdEmergency">Emergency</button>
            <button type="button" class="btn btn-default" id="cmdAdd">Add Visitor</button>
            <button type="button" class="btn btn-default" id="cmdAddBulk">Add Bulk Visitors</button>            
        </div>

        <ul class="nav nav-tabs">
            <li class="active"><a href="#register" data-toggle="tab">Current Register <span class="label label-success" id="CountIn">@Model.VisitorsIn</span></a></li>
            <li><a href="#expected" data-toggle="tab">Visitors Expected <span class="label label-success">@Model.VisitorsExpected</span></a></li>
            <li><a href="#all" data-toggle="tab">All Visitors <span class="label label-success" id="CountTotal">@Model.TotalVisitors</span></a></li>
        </ul>

        <div class="tab-content">

            <!-- Visitors currently in the building -->
            <div class="tab-pane active" id="register">

                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="RegisterList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="current" })
                        </div>
                    </div>
                </div>
            </div>

            <!-- Expected visitors not yet arrived -->  
            <div class="tab-pane" id="expected">
                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="ExpectedList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="expected" })
                        </div>
                    </div>
                </div>

            </div>

            <!-- All visitors for the day -->
            <div class="tab-pane" id="all">
                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="AllList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="all" })
                        </div>
                    </div>
                </div>
            </div>

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

<div class="modal fade" id="myModal">
    <!-- Modal content goes here -->
</div><!-- /.modal -->

如何确保更新后模态仍然有效？

【问题讨论】：

能不能把HTML的相关部分加进去，或者加个jsfiddle？
我已经添加了相关的 HTML。
添加到#registerList 的HTML，是否包含带有id="myModal" 的任何元素？这是我唯一能想到的其他事情。
不，只有一个 - 添加的 HTML 有 modalContent 和 modalHeader。
更新后查看控制台时#myModal是否还在html页面中，它仍然是正确的元素？

标签： javascript jquery ajax twitter-bootstrap modal-dialog

【解决方案1】：

我知道这听起来微不足道，但您是否可能在 AJAX Html 中遗漏了对 bootstrap.js 的引用？当我遇到同样的错误时，添加参考对我有用。

【讨论】：

【解决方案2】：

我认为当#RegisterList 设置数据时，您的#myModal 就会消失。你应该去看看。

【讨论】：