click event not triggered on bootstrap modal

I am trying to catch the click event when 

save changes

 is pushed.

For some reason i can't 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 -->

[/code]

Answers

You need to wrap this in a document.ready:

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

Your element [code]#inviteRequest

 does not exist at the time you try to add an event handler to it. You need to wait for the page to load first. My code is the equivalent to $(document).ready(); 

[/code]