【发布时间】：2015-01-24 23:18:06
【问题描述】：
在使用 jQuery 生成引导模式时，我注意到了一个问题。在动态生成的局部视图（我的模式）中添加更多 javascript 会导致出现双背景。有谁知道为什么会这样？我正在使用 jquery-1.8.2.js 和 Bootstrap v3.1.1。非常感谢。
App.js
$(document).ready(function () {
$('.modal-button').on('click', function (e) {
// Remove existing modals.
$('.modal').remove();
$.ajax({
url: '/Ajax/GetSearchModal/',
type: "get",
cache: false,
success: function (data) {
var modal = $(data);
$(data).modal({
backdrop: 'static',
keyboard: false,
});
}
});
});
});
局部视图（我的模态）
@model MVCApp.Web.Models.ModalSearchModel
<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>
Select Something
</h3>
</div>
@using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
{
<div class="modal-body">
@Html.HiddenFor(m => m.SelectedDropDownID, new { @class = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
</div>
<div class="modal-footer">
<button type="submit" value="Continue">Continue</button>
<button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// This here causes the drop backdrop
// select2 code here
});
</script>
更新
将 javascript 从模式移动到成功处理程序对我想要实现的目标不起作用。我希望启动 select2 下拉列表。我可以让它在成功处理程序中工作的唯一方法是使用以下内容：
modal.on('shown.bs.modal', function () {
$('#SelectedDropDownID').select2({
ajax: {
url: '/Ajax/FetchResults/',
dataType: 'json',
delay: 250,
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return { results: data };
}
},
minimumInputLength: 2,
formatResult: formatRepo,
formatSelection: formatRepoSelection
});
});
但是，select2 激活存在延迟，因为显示的事件在模式完成动画进入屏幕之前不会触发。如果我在所示事件之外运行代码，则 select2 永远不会激活。
已解决
非常感谢 Pasha Zavoiskikh 和 cvrebert。我不得不更新 Bootstrap 和 jQuery 来修复双背景。根据 Pasha 的评论，在调用 select2 固定 select2 不触发之前将模式附加到正文。这是完整的修复：
function formatRepo(item) {
var markup = "<table class='item-result'><tr>";
if (item.text !== undefined) {
markup += "<div class='item-name' data-jtext=" + item.text + " data-jid=" + item.id + ">" + item.text + "</div>";
}
markup += "</td></tr></table>"
return markup;
}
function formatRepoSelection(item) {
return item.text;
}
$('.modal-button).on('click', function (e) {
// Delete existing modals.
$('.modal').replaceWith('');
// Get modal.
$.ajax({
url: '/Ajax/GetSearchModal/',
type: "get",
cache: false,
success: function (data) {
var modal = $(data);
$('body').append(modal);
$('#SelectedDropDownID').select2({
ajax: {
url: '/Ajax/FetchResults/',
dataType: 'json',
delay: 250,
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return { results: data };
}
},
minimumInputLength: 2,
formatResult: formatRepo,
formatSelection: formatRepoSelection
});
modal.modal({
backdrop: 'static',
keyboard: false,
});
}
});
});
【问题讨论】：
-
只需将 js 从部分移动到成功处理程序
-
您好，感谢您的快速回复。我已经更新了问题。
-
v3.1.1 已过时。请升级。
-
@Lionhart3001 您是否有理由通过 ajax 调用获取模式，而不是将其存储在页面上，然后显示它？
-
@Lionhart3001 即使有，我也会先将其附加到 DOM，初始化 select2，然后初始化 modal。
标签： jquery asp.net-mvc twitter-bootstrap modal-dialog