Bootstrap MODAL操作按钮不起作用

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

modal script:

模态脚本：

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

        });

    </script>
}

2 个解决方案

#1

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();
});

#2

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

我建议你在Layout.cshtml页面的Script Section中放置btnSave Jquery click事件。此点击事件必须放在@Render正文之后，否则最好将它放在正文标记结尾之前

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 Model Html Code

<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- 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>

#1