wrapping event handlers with document.on(pageinit)

wrapping event handlers with document.on(pageinit)

I'm writing a simple mobile web site using JQuery Mobile.

I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function, and I call the function from within the head HTML section.

Here is the code:

  1. function initPage() {
  2.         // Anchor links handling.
  3.         $(document).on('vclick', 'a[href^=#][href!=#]', function() {
  4.             location.hash = $(this).attr('href');
  5.             return false;
  6.         });
  7. }

Here is HTML fragment calling the code:

  1. <html>
  2. <head>
  3. ...
  4. <script type="text/javascript">
  5.    initPage();       
  6. </script>
  7. ...

My code works fine, but I have a doubt about which is the best way to call the code and whether should I wrap my code with $(document).on('pageinit') ?

Like this?

  1. function initPage() {
  2.     $(document).on('pageinit', function(){
  3.         // Anchor links handling.
  4.         $(document).on('vclick', 'a[href^=#][href!=#]', function() {
  5.             location.hash = $(this).attr('href');
  6.             return false;
  7.         });
  8.     });
  9. }

Or maybe like this?

  1. <html>
  2. <head>
  3. ...
  4. <script type="text/javascript">
  5.     $(document).on('pageinit', function(){
  6.         initPage();       
  7.     });
  8. </script>
  9. ...

Many thanks for support.