title: Attach JQuery Click Event to Anchor Id
body: <p>I have an easy one SO.  Why cant I attach a click event straight to an anchors Id?  I should have pointed out that I am also using JQuery Mobile.</p>
  
  <pre><code>            &lt;div id="foobarNavbar" data-role="navbar" style="display:none;"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a id="foo" href="#foo" data-icon="plus"&gt;New Event&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="bar" href="#bar" data-icon="grid"&gt;Events&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- /foobarNavbar--&gt;
  </code></pre>
  
  <p>I am trying to attach a click event to foo.  This doesn't work:</p>
  
  <pre><code>        $('#foo').bind('click', function(e) 
          {   
              e.preventDefault();
              console.log("You clicked foo! good work");
          });
  </code></pre>
  
  <p>This does work but gives me the click event for both foo and bar.   Is it not possible to bind to an anchor Id or am I making a rookie error?</p>
  
  <pre><code>        $('#foobarNavbar ul li a').bind('click', function(e) 
          {   
              e.preventDefault();
              console.log("You clicked foo! good work");
              console.log(e);
          });
  </code></pre>