title: jQuery Mobile click event not firing?
body: <p>I have tried to fix this all morning so please help me if you can. </p>
  
  <p>I've got this code:</p>
  
  <pre><code>$(document).bind('pageinit', function(){
      var menuOpen;
      // Menu
      $('#menu-trigger').on('click', function(e){
          e.preventDefault();
          alert('click!');
          if(menuOpen != true) {
              $('.ui-page-active').animate({
                  'margin-left': '390px'
              }, 300, function(){
                  menuOpen = true
              });
              return false;
          } else {
              $('.ui-page-active').animate({'margin-left': 0}, 300, function(){menuOpen = false});
              return false;
          }
      });
  });
  </code></pre>
  
  <p>My problem is that I never get the "<strong>click!</strong>" alert. After clicking on the element with the <code>id</code> <code>#menu-trigger</code>, nothing happens. </p>
  
  <p>I have tried everything I can but still no result. </p>
  
  <p>My code is inside a <code>script</code> tag, just below the jQuery Mobile script inclusion.</p>
  
  <p>P.S.: Here is the HTML code fragment:</p>
  
  <pre><code>&lt;header data-role="header" class="with-logo"&gt;
    &lt;a href="#" id="#menu-trigger" data-role="button" class="ui-btn-left"&gt;&lt;img src="images/menu-trigger-icon.png"&gt;&lt;/a&gt;
    &lt;h1&gt;&lt;img src="images/logo.png"&gt;&lt;/h1&gt;
  &lt;/header&gt;&lt;!-- /header --&gt;
  </code></pre>