What is the best way to bind click events?

What is the best way to bind click events?

Hello. I'm an 'experienced' HTML5/CSS3/JavaScript Front-End developer and this is my first time using a framework that employs a dynamic DOM instead of loading pages, and I've come to the question:

What is the best way, considering how jQ Mobile handles its dynamic DOM, to bind click events?

So far I have tried 3 methods that work, but I do not know which is the preferred one:

  1. <div data-role="page">
  2.       .....
  3.       .....
  4.       <script type="text/javascript">
  5.             $("#mydiv").click(function() { ... });
  6.       </script>
  7. </div>

  1. $(":mobile-pagecontainer").on( "pagecontainerchange", function( event, ui ) {
  2.       if( $(":mobile-pagecontainer").activepage().attr("id") == "myPage) {
  3.             //Unbind any previous events just in case this element was already in the   DOM.
  4.             $("#mydiv").unbind();
  5.              $("#mydiv").click(function() { ... });
  6.       }
  7. } );

  1. <div data-role="page">
  2.       <div id="mydiv" onclick="myAction()">
  3.             ....
  4.       </div>
  5. </div>

Which one is the best way, or is there a better way than the ones I have used?