Bootstrap MODAL 操作按钮不起作用答案

【问题标题】：Bootstrap MODAL action button not workingBootstrap MODAL 操作按钮不起作用
【发布时间】：2015-04-27 19:44:17
【问题描述】：

我使用 Bootstrap 开发 MVC 5。我的项目有一个模式，它是打开点击链接，贝娄是我的模式语法，我的问题是我的页脚操作按钮不起作用。在保存按钮点击事件下我想警报。

目标链接：

标题

<a href="#" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#basicModal">Click to open Modal</a>

模态：

<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">&amp;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>

模态脚本：

@section Scripts {
    <script>
        $(function () {
            $('btnSave').on('click', function (event) {
                alert();
                event.preventDefault();
            });

        });

    </script>
}

【问题讨论】：

标签： jquery twitter-bootstrap asp.net-mvc-5 bootstrap-modal

【解决方案1】：

我建议你将 btnSave Jquery 点击事件放在 Layout.cshtml 页面的脚本部分。这个点击事件必须放在@Render body 之后，否则最好放在body Tag Ending 之前

您可以将以下代码放在您的 Layout.cshtml 中，如下所示 -

--@RenderBody 之后

-1- 首先加载Jquery

-2- 然后加载 Bootstrap.min.js

-3-然后放置引导模型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">&amp;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- 然后将代码放在下面

 <script>
    $(function () {
        $('#btnSave').on('click', function (event) {
            alert();
            event.preventDefault();
        });

    });

</script>

-5- 然后转到您想要放置按钮的视图，该按钮将显示弹出窗口并将代码放在下面

<a href="#" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#basicModal">Click to open Modal</a>

【讨论】：

【解决方案2】：

你在正确的轨道上，但没有#，它会尝试寻找标签名为 btnSave 的元素。你需要更新你的选择器，让它选择一个 ID 为 btnSave 的元素：

$('#btnSave').on('click', function (event) {
    alert();
    event.preventDefault();
});

【讨论】：

Cameron Tinker，感谢您的回复。但它对我不起作用。我将此模式用作我的 mvc5 项目的部分视图，这里点击 btnSave 不会触发我的警报。该怎么办？跨度>
啊，您需要为局部视图预加载 JavaScript。您可以在视图中包含必要的 JavaScript 引用以加载模式的 JavaScript。你也可以使用某种模块加载器，比如 RequireJS 来按需加载你的 JavaScript。然后，您的代码将在部分加载时执行。
Cameron Tinker，你说得对，我的部分视图页面无法加载 javascript 部分。我是 mvc 的新手，请你告诉我一些如何按需加载 javascript 或预加载 javascript 的语法。谢谢你。
我也有同样的问题，@shamim 找到解决方案了吗？

【解决方案3】：

当然也可以简单的使用onclick来触发保存：

<button type="button" class="btn btn-primary" onclick="someAction();">Save changes</button>

【讨论】：