title: jQuery .data not working
body: <p>So, essentially I have set up a page that will allow a user to click on an anchor, and when they do, a jQuery function should display new content in a defined div using jQuery .html. It also should be dynamically pulling that content from custom data attributes, however it isn't working. What am I doing wrong? Here's the HTML.</p>
  
  <pre><code>&lt;section id="about"&gt;
  
  &lt;div class="content-container"&gt; 
  
  &lt;h2 class="title"&gt;&lt;span&gt;About&lt;/span&gt; the Film&lt;/h2&gt;&lt;!-- / .title --&gt;
  
  &lt;nav id="crew-nav"&gt;
  &lt;ul id="crew-list"&gt;
  
    &lt;li class="jesse" data-first="Jesse" data-last="Winton" data-bio="JESSE WINTON is ultra mega cool beans." data-image="http://development.targetedthemovie.com/img/crew/jesse-winton-background.jpg"&gt;
      &lt;a href="#"&gt;Jesse Winton&lt;br&gt;
        &lt;span&gt;Director/Writer&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
    &lt;li class="matt" data-first="Matt" data-last="Blick" data-bio="MATT BLICK is an awesome person when you pretend he doesn't exist." data-image="http://development.targetedthemovie.com/img/crew/matt-blick-background.jpg"&gt;
      &lt;a href="#"&gt;Matt Blick&lt;br&gt;
        &lt;span&gt;Director of Photography&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;&lt;!-- / #crew-list --&gt;
  &lt;/nav&gt;&lt;!-- / #crew-nav --&gt;
  
  &lt;div class="top-mask"&gt;&lt;/div&gt;&lt;!-- / .top-mask --&gt;
  
  &lt;article id="about-content" class="content"&gt;
  
  &lt;article&gt; 
  &lt;h4 class="first-name"&gt;&lt;/h4&gt;&lt;!-- / .first-name --&gt;
  &lt;h3 class="last-name"&gt;&lt;/h3&gt;&lt;!-- / .last-name --&gt;
  
  Wintons Motion Pictures brings you a new, hard-hitting documentary film by Jesse Winton. TARGETED will be examining one of the key issues of the day, gun control, and will take you on a fast-paced journey, following 19 year-old director Jesse Winton as he travels across the world, and goes back to the historical roots of the gun-control agenda, exposing it, and bringing out the dark truth behind gun control. TARGETED will creatively answer the increasingly tough questions regarding the issue, as well as giving us a plan that will help to mobilize freedom-loving Americans to defend the rights and liberties that have been granted to us. Coming 2014.
  &lt;/article&gt;   
  
  &lt;/article&gt;&lt;!-- / #about-content --&gt;
  
  &lt;div class="bottom-mask"&gt;&lt;/div&gt;&lt;!-- / .bottom-mask --&gt;
  
  &lt;/div&gt;&lt;!-- / .content-container --&gt;
  
  &lt;/section&gt;&lt;!-- / #about --&gt;
  </code></pre>
  
  <p>And here's the jQuery</p>
  
  <p>JUST EDITED THIS TO CLARIFY. THE data-bio SHOULD BE LOADED IN THROUGH THE VARIABLE</p>
  
  <pre><code>var bio = $(this).data('bio');
  
  $('.jesse').live('click', function() {
  $('#about').css('background-image','url('+$img+')');
  $('#about-content article').html(bio);
  });
  
  $('.matt').live('click', function() {
    $('#about').css('background-image','url('+$img+')');
    $('#about-content article').html(bio);
  });
  </code></pre>
  
  <p>So, as you can see in the HTML, I have the bio content stored in custom data attributes, and in the jQuery, when you click on the list item, the new content should be loaded into the #about div, but it won't do it. Anyone see the problem? Thanks in advance.</p>