title: jQuery .attr() method returning undefined
body: <pre><code>&lt;ul id="footernav"&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);" id="chat" data-icon="custom" data-transition="none"&gt;Tools&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);" id="email" data-icon="custom" data-transition="none"&gt;My Ride&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);" id="login" data-icon="custom" data-transition="none"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);" id="skull" data-icon="custom" data-transition="none"&gt;Cool&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);" id="coffee" data-icon="custom" data-transition="none" class"ui-btn-active ui-state-persist"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now I am using this jQuery function to get the <code>id</code> of the <code>li</code> which I have clicked:</p>
  
  <pre><code>$('#footernav li').click(function(){                     
      alert($(this).attr('id'));                    
  });
  </code></pre>
  
  <p>But it returns <code>undefined</code>.</p>