Jquery 'beforeunload' not working until triggered by any link or button

<script> 
function windowBeforeUnload() {
 return "You sure?";
}
$(window).on('beforeunload',windowBeforeUnload);
</script> 

I posted the following code on a new page in my rails application. I come to the new page via my home page and try reloading the new page or changing the url. There is no pop up message. If i click a link or a button displayed in my new page containing the javascript code, then the 'beforeunload' gets triggered and after this, it starts working for all actions such as changing url , reloading etc. Can someone give me a solution to this and the reason why it is happening so?
P.S. I've also tried using
$(document).ready(function(){...});