javascript - Bootstrap 模式加载远程内容生成 2 个请求

Question

我正在使用 Bootstrap 模式远程加载数据，由于某种原因，这个请求会两次发送到服务器，然后它会弄乱模式的 View 。

模态

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-dialog-middle modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <i class='fa fa-refresh fa-spin fa-5x'></i>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<a data-toggle="modal" id="@series.Id" href="@Url.Action("GetEpisodes")?id=@series.Id&title=@(Url.Encode(series.Title))" data-target="#myModal">@series.Title</a>

模式内容一旦加载

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="episodeModal">@Model.SeasonTitle</h4>
</div>
<div class="modal-body">
    @foreach (var kvp in Model.EpisodeViewModels)
    {
        <div class="panel panel-default">
            <div class="panel-heading panel-grid">
                @*<h4 class="panel-title">Season @kvp.Key</h4>*@

                <h4 class="col-md-1 panel-title-small text-left"></h4>
                <h4 class="col-md-6 panel-title-small text-center">Title</h4>
                <h4 class="col-md-2 panel-title-small text-center">Downloaded</h4>
                <h4 class="col-md-2 panel-title-small text-center">Air Date</h4>
                <h4 class="col-md-1 panel-title-small text-left">Search</h4>
            </div>
            <div class="panel-body">
                <small>Season @kvp.Key</small>
                <div class="divider"></div>
                @foreach (var ep in kvp.Value)
                {
                    <div class="row">
                        <div class="col-md-1 text-center">@ep.EpisodeNumber</div>
                        <div class="col-md-6">@ep.Title</div>
                        <div class="col-md-2 text-center">@Html.Raw(ep.HasFileIcon)</div>
                        <div class="col-md-2 text-center">@ep.AirDate.ToShortDateString()</div>
                        <div class="col-md-1 text-center"><i class="fa @FontAwesome.Search"><a class="episodeId" href="#" id="@ep.ID"></a></i></div>
                    </div>
                }
            </div>
        </div>
    }

</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

处理加载多个远程数据的 JavaScript

$(function() {
    $("a[data-target=#myModal]").click(function (ev) {
        console.log("clicked");
        ev.preventDefault();
        var target = $(this).attr("href");

        // load the url and show modal on success
        $("#myModal .modal-body").load(target, function() { 
            $("#myModal").modal("show");
            $('#myModal').modal('handleUpdate');
        });
    });
});

请注意，如果没有上述 JS 代码，问题就会发生。

我怎样才能阻止这种情况发生并让它只生成 1 个请求？

Answer 1

如果您手动为模式添加事件处理程序，您不希望在页面加载时自动执行相同操作的元素上设置 data- 属性。

从元素中删除 data-toggle 属性。

bootstrap.js 库查找这些属性并相应地分配事件处理程序