如何解决jquery 函数不适用于 Dyanamic Boostrap 模态关闭
我在 asp.net mvc 项目中对动态内容使用 Bootstrap 模式。 (引导程序版本 3.4.0 到 4) 每当我们尝试关闭模式并单击任何用于 Sidemenu 折叠或展开的 jquery 函数时,我都必须刷新页面。此侧边菜单折叠或展开也适用于 2 次打开和关闭模式。
function openModal(url,title,maxwidth,reload) {
$('.modal-body').load(url,function() {
$("#Modeltitle").text(title);
$('#GenericModel').modal({
show: true
});
$("#GenericModel .modal-dialog").css("max-width",maxwidth);
if (reload === true) {
$("#GenericModel").on("hidden.bs.modal",function() {
window.location.reload();
});
}
});
}
<!--Main Layout for Parent Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>@ViewBag.Title</title>
<link href="/Content/staffs/bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/staffs/style.css" rel="stylesheet"/>
<link href="/Content/select2.min.css" rel="stylesheet"/>
<link href="/Content/toastr.css" rel="stylesheet"/>
<link href="/Content/staffs/staffsCustom.css" rel="stylesheet"/>
</head>
<body class="light purple-sidebar theme-white sidebar-mini">
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
@Html.Partial("_topNavbar")
<!-- Main Content -->
<div class="main-content">
@RenderBody()
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
<!--Generic Modal Start -->
<div class="modal fade" id="GenericModel" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="Modeltitle">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal" title="Close" aria-label="Close">×</button>
</div>
<div class="modal-body">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!--Generic Modal End -->
<script src="/Scripts/jquery-3.5.1.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/staffs/bootstrap.min.js"></script>
<script src="/Scripts/select2.full.min.js"></script>
<script src="/Scripts/staffs/staffsCustom.js"></script>
@RenderSection("scripts",required: false)
</body>
</html>
<!-- Main Layout for Parent Page -->
<!--Call From Parent Page -->
<a href="@Url.Action("user","masters")" onclick="openModal(this.href,'Add User','60%',true); return false;" class="btn btn-primary" title="Add New">
<!-- Sidebar Toggle Code which not work on modal close -->
<a href="#" data-toggle="sidebar" class="nav-link nav-link-lg collapse-btn"><i class="fas fa-bars"></i></a>
<!--On Above code Bootstrap Modal Open which have another layout with all CSS and JS -->
@{
ViewBag.Title = "User";
Layout = "~/Areas/staffs/Views/Shared/_ModalLayout.cshtml";
}
<div class="form-row">
<div class="col-lg-9 col-sm-6 col-xs-12">
@using (Html.BeginForm("user","masters",FormMethod.Post,new { id = "fmruser",@onsubmit = "return validateForm();" }))
{
@Html.AntiForgeryToken()
<div class="form-row">
@Html.ValidationSummary(true,"",new { @class = "text-danger" })
@Html.HiddenFor(model => model.id)
@Html.HiddenFor(model => model.pic)
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 form-group">
<label class="required">Email</label>
@Html.EditorFor(model => model.email,new { htmlAttributes = new { @type = "email",@class = "form-control",@required = "required" } })
@Html.ValidationMessageFor(model => model.email,new { @class = "text-danger" })
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<button class="btn btn-primary" type="button" onclick="SaveUsers()"></button>
<span class="btn btn-outline-secondary" data-dismiss="modal">Close</span>
</div>
</div>
}
</div>
</div>
@section Scripts {
//Jquery Validation
@Scripts.Render("~/bundles/jqueryval")
}
关闭 Dyanmaic Boostrap Modal 后。 Jquery 功能在父页面上不起作用。我们每次都需要刷新才能工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。