jQuery this.data-x not working
<p>I've got a table containing the periodic table, and this jQuery to, when you click on an element's name, tell you what it's full name is.</p>

<p>However when I click on one nothing happens... I've tried different syntax etc but still nothing.</p>

<p>Here's what my table HTML looks like (class="s-4" means font-size:4; - doesn't mean anything to this question):</p>

<pre><code>&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="B"&gt;B&lt;/a&gt;&lt;/td&gt;
&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="C"&gt;C&lt;/a&gt;&lt;/td&gt;
&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="N"&gt;N&lt;/a&gt;&lt;/td&gt;
&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="O"&gt;O&lt;/a&gt;&lt;/td&gt;
&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="F"&gt;F&lt;/a&gt;&lt;/td&gt;
&lt;td class="s-4"&gt;&lt;a class="e" href="#" data-e="Ne"&gt;Ne&lt;/a&gt;&lt;/td&gt;
</code></pre>

<p>And here's what my jQuery/JavaScript looks like:</p>

<pre><code>   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    $(".e").click(function() {
    var e = this.data-e;
      if(e == 'H') { $("#a").html('H is Hydrogen'); }
      if(e == 'He') { $("#a").html('He is Helium'); }
      if(e == 'Li') { $("#a").html('Li is Lithium'); }
      if(e == 'Be') { $("#a").html('Be is Beryllium'); }
      if(e == 'B') { $("#a").html('B is Boron'); }
      if(e == 'C') { $("#a").html('C is Carbon'); }
      if(e == 'N') { $("#a").html('N is Nitrogen'); }
etc etc... and then

    });
    });
    &lt;/script&gt;
</code></pre>

<p>&#35;a refers to the &lt;h1&gt; at the top of my page, and .e refers to the links (that you click on to find out the element's name)</p>

<p>Does anyone have any ideas?
<br>Thanks</p>
