Bootstrap模态在部分Ajax加载后不触发

Question

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

在60秒钟后，该模式会多次触发ok，然后UpdateRegister函数将运行，之后，我会收到一个“ 0x800a01b6-JavaScript运行时错误：当我再次单击该按钮以打开模式时，对象不支持属性或方法'modal'” 。

触发模式的按钮（'#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 -->

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

Answer 1

我知道这听起来很琐碎，但是您可能会缺少AJAX HTML中对bootstrap.js的引用吗？ 当我遇到相同的错误时，添加引用对我有用。

Answer 2

我认为#RegisterList设置数据后，您的#myModal消失了。 您应该去检查一下。