Unable to invoke button event from a partial view mvc4

Question

I have mvc4 project. i am using bootstrap 3.1.1. I include a partial view in a bootstrap model. I have a button in the partial and i want to do some custom logic on click of that button. the partial loads, i can see the modal. however the click event on the button present in the partial view never gets invoked.

Any help will be appreciated. I am using Jquery 1.11.

controller

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Login()
    {
        return PartialView("Partial1");
    }

Partial view

<div class="modal-body">
        <div class="panel panel-default">
            <div class="panel-body">

                <button class="btn btn-inverse" type="submit" id="cmdUpdatePhone">Update &amp Continue</button>
        <button class="btn btn-inverse" type="submit" id="cmdContine">Continue</button>
            </div>
        </div>

    </div>

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<div class="container">

    <h2>Index</h2>
    <div class="modal" id="edit-phone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="edit-phone-container"></div>
            </div>
        </div>
    </div>

            <button type="button" id="cmdTest">Test</button>

</div>

scripts

@section Scripts {
    <script type="text/javascript">

        $(function () {
            $(document).ready(function () {
                // This will work because we are listening on the 'document', 
                // for a click on an element with an ID of #test-element
                $('document').on("click", '#cmdUpdatePhone', function (e) {
                    alert("click bound to document listening for #test-element");
                });
            });

            $('#cmdTest').click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: '@Url.Action("Login")',
                    data: '',
                    success: function (response) {

                        $('#edit-phone-container').html(response);
                        $('#edit-phone').modal({
                            backdrop: 'static',
                            show: true
                        });

                    },
                    error: function (data) {
                        console.log(data);
                    },
                    type: 'POST',
                    contentType: 'application/json, charset=utf-8'
                });
            });
        });

    </script>
}

Answer 1

Here is the mistake:

$('document').on("click", '#cmdUpdatePhone', function (e) {
                    alert("click bound to document listening for #test-element");
                });

you don't need to use quotes with the document as document is not a html tag, do like this:

 $(document).on("click", "#cmdUpdatePhone", function (e) {
                    alert("click bound to document listening for #test-element");
                });

or you can do like this:

$('body').on("click", "#cmdUpdatePhone", function (e) {
                        alert("click bound to document listening for #test-element");
                    });

Answer 2

since the button is loaded dynamically after the page load you need to tie the click event to the document. change

$('#cmdTest').click(function (e) {

to

$(document).on('click', '#cmdTest', function (e) {...