1

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

在 UpdateRegister 函数在 60 秒后运行之前，模态多次触发，之后当我单击按钮再次打开模态时，我收到“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 -->

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

4

2 回答 2

1

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

于 2013-11-12T13:06:50.547 回答
0

我认为您在设置数据#myModal时会消失。#RegisterList你应该去检查一下。

于 2013-10-03T12:36:57.227 回答