Bootstrap MODAL action button not working

Question

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.

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

Solution

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').on('click', function (event) {
    alert();
    event.preventDefault();
});