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>

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">&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 click事件放置在Layout.cshtml页面的脚本部分中。此点击事件必须放在@Render正文之后，否则最好将其恰好放在body标记结尾之前

您可以如下将以下代码放入您的Layout.cshtml中-

-@RenderBody之后

-1-首次加载Jquery

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

-3-Then Place Bootstrap Model 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>

Answer 2

您处在正确的轨道上，但没有#，它将尝试查找标签名称为btnSave的元素。您需要更新选择器，以便选择ID为btnSave的元素：

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

Answer 3

当然，可以简单地使用onclick触发保存：

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