我有一个按钮,我在上面触发bootstrap模态弹出窗口如下:
<a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px">
<i class="fa fa-save"></i> Add to Watchlist
</a>
模态弹出html就像以下:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
添加到手表列表按钮后,将jQuery帖子加载到服务器上,当服务器返回HTML时,我只需更新用户DOM即可显示此按钮。
这里的问题是,在执行jQuery帖子后,我添加了一个类,该类基本上在执行搜索时显示了一个变化的装备,现在当我按下按钮时,显示了模态,但是此"加载"类的加载为请点击模态弹出窗口。
使加载类别出现的代码为:
$body = $("body");
function StartLoading() {
$(document).on({
ajaxStart: function () { $body.addClass("loading"); }
});
}
function StopLoading() {
$(document).on({
ajaxStop: function () { $body.removeClass("loading"); }
});
}
现在如何在按下"添加到WatchList"按钮时防止这两者的混合,因此我只能显示模态并在加载DOM后删除加载类?
P.S。因此,最终,我不想在单击按钮显示弹出窗口时显示"加载"类的内容,只是模态弹出本身。
不确定我是否正确理解您的问题,但是您可以创建一个变量,以跟踪模态的内容是否已经加载,然后在if(modalHasNotBeenLoaded)
中包装$body.addClass("loading");
?