Issue with Jquery click event

Question

I have implemented an application in MVC.I have created messagebox using jquery. when i clicked on button messagebox appears.

<button   type="button" class="btn btn-primary" id="btnDispatch" >Dispatch</button>

My jquery code is

$(document).ready(function () {


        $('#btnDispatch').click(function () {

            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose"> × </button> <h5 id="dataConfirmLabel">Dispatch Alert</h5> </div><div class="modal-body"><h5>This order is dispatched.</h5><br/></div><div class="modal-footer"><button id="btnOk" type="submit" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> </div></div> <div class="modal-backdrop"></div>');


            $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));

            $('#dataConfirmModal').modal({ show: true }); 

            $('#btnClose').dialog('close');

            $('#btnOk').click(function () {

                var url = "http://localhost:65344/Dispatch";
                $(location).attr('href', url);

            });
        });


    });

I want to return to index page of dispatch after clicking on ok button. but ok button and x button dosen't work here. Is there any solution? ![enter image description here][1]

Answer 1

You need to use event delegation here since your button has been dynamically added to the DOM:

$('body').on('click', '#btnOk', function() {
    var url = "http://localhost:65344/Dispatch";
    $(location).attr('href', url);
});

This technique will helps you to attach the click event to this newly added button.