title: Error in event handler: "this.data() is not a function"
body: <p>I have an HTML list of links with <code>data-…</code> attributes on each one:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul id="list"&gt;
      &lt;li&gt;&lt;a data-info="link1"&gt; **** &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-info="link2"&gt;****&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-info="link3"&gt;**** &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-info="link4"&gt;****&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need to receive the <code>data-info</code> value of a link whenever it is clicked. So I thought something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var my_links = $('#list').find('a');
  
  my_links.on('click', function(){
       console.log(this.data(info));
  });
  </code></pre>
  
  <p>But then I get:</p>
  
  <blockquote>
    <p>Uncaught TypeError: this.data is not a function</p>
  </blockquote>
  
  <p>If I just do:</p>
  
  <pre class="lang-js prettyprint-override"><code>var my_links = $('#list').find('a');
  
  my_links.on('click', function(){
    console.log(this);
  });
  </code></pre>
  
  <p>I get the complete HTML code of each link, for example:</p>
  
  
  
  <pre><code>&lt;a data-info="link1"&gt; **** &lt;/a&gt;
  </code></pre>
  
  <p>Why are both things happening, and how can I fix it?</p>