The click event does not fire when loading a modal

Question

I am trying to catch a click event when save changes clicked.

For some reason, I cannot catch the click event.

Why?

 <script> $('#inviteRequest').click(function(){ // e.preventDefault(); console.log(1); $('#myModalInviteDestination').modal('hide'); }); </script> <!-- Modal --> <div class="modal fade" id="myModalInviteDestination" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button> <h4 class="modal-title" id="myModalLabel">Enter your friends email address</h4> </div> <div class="modal-body"> <textarea rows="5" cols="68" name="invites"></textarea> <div>use ; as delimiter</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="inviteRequest">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 1

You need to wrap this in document.ready:

 $(function() { $('#inviteRequest').click(function(){ console.log(1); $('#myModalInviteDestination').modal('hide'); }); }); 

Answer 2

Use "live" which will link the element when the element creates

 $('#inviteRequest').live('click',function(){ console.log(1); $('#myModalInviteDestination').modal('hide');});