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消失了。 您應該去檢查一下。