jquery - Bootstrap MODAL 操作按钮不起作用

Question

我使用 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>
}

Answer 1

我建议您将 btnSave Jquery 单击事件放置在 Layout.cshtml 页面的脚本部分中。此点击事件必须放置在 @Render body 之后，或者最好将其放置在 body Tag Ending 之前

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

-- @RenderBody 之后

-1- 首次加载 Jquery

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

-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">&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-然后转到您要放置将显示弹出窗口的按钮的 View ，并将代码放在下面

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