twitter-bootstrap Bootstrap MODAL 操作按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29904574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap MODAL action button not working
提问by shamim
I work on MVC 5 with Bootstrap. My project have one modal,it's open click on link, Bellow is my modal syntax,my problem is my footer action button is not working.Under the save button click event I want to alert.
我使用 Bootstrap 处理 MVC 5。我的项目有一个模态，它是打开点击链接，波纹管是我的模态语法，我的问题是我的页脚操作按钮不起作用。在保存按钮单击事件下，我想提醒。
target link:
目标链接：
Heading
标题
<a href="#" class="btn btn-lg btn-success"
data-toggle="modal"
data-target="#basicModal">Click to open Modal</a>
modal :
模态：
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
modal script:
模态脚本：
@section Scripts {
<script>
$(function () {
$('btnSave').on('click', function (event) {
alert();
event.preventDefault();
});
});
</script>
}
回答by shamim
I recommend you to place you btnSave Jquery click event in Script Section of Layout.cshtml page . This click event must be placed after @Render body or it will best to place it exactly before body Tag Ending
我建议您将 btnSave Jquery 单击事件放在 Layout.cshtml 页面的脚本部分。这个点击事件必须放在@Render body 之后，否则最好放在 body Tag Ending 之前
You Can Place the Following Code in Your Layout.cshtml as Below -
您可以将以下代码放在 Layout.cshtml 中，如下所示 -
-- After @RenderBody
-- 在@RenderBody 之后
-1- First Load Jquery
-1- 首先加载 Jquery
-2- Then Load Bootstrap.min.js
-2- 然后加载 Bootstrap.min.js
-3-Then Place Bootstrap Model Html Code
-3-然后放置 Bootstrap 模型 Html 代码
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
</div>
</div>
-4- Then Place The Code Below
-4- 然后将代码放在下面
<script>
$(function () {
$('#btnSave').on('click', function (event) {
alert();
event.preventDefault();
});
});
</script>
-5- Then Go to your View Where you want to place Button that will show popup and Place the code below
-5-然后转到您要放置按钮的位置，该按钮将显示弹出窗口并放置下面的代码
<a href="#" class="btn btn-lg btn-success"
data-toggle="modal"
data-target="#basicModal">Click to open Modal</a>
回答by Cameron Tinker
You are on the right track, but without the #, it will try and look for elements with the tag name btnSave. You need to update your selector so that it will select an element with the ID btnSave:
您走在正确的轨道上，但如果没有#，它会尝试寻找标签名称为 btnSave 的元素。您需要更新您的选择器，以便它选择一个 ID 为 btnSave 的元素：
$('#btnSave').on('click', function (event) {
alert();
event.preventDefault();
});
回答by caram
Of course there is the possibility to simple use onclickto trigger save:
当然也可以简单的使用onclick来触发保存：
<button type="button" class="btn btn-primary" onclick="someAction();">Save changes</button>
