jQuery.data不工作

因此，本质上我已经设置了一个页面，允许用户单击锚，当用户单击锚时，jQuery函数应该使用jQuery.html在定义的div中显示新内容。它还应该动态地从自定义数据属性中提取该内容，但是它不起作用。我做错了什么？这是HTML

<section id="about">

<div class="content-container"> 

<h2 class="title"><span>About</span> the Film</h2><!-- / .title -->

<nav id="crew-nav">
<ul id="crew-list">

  <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">
    <a href="#">Jesse Winton<br>
      <span>Director/Writer</span>
    </a>
  </li>

  <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">
    <a href="#">Matt Blick<br>
      <span>Director of Photography</span>
    </a>
  </li>

</ul><!-- / #crew-list -->
</nav><!-- / #crew-nav -->

<div class="top-mask"></div><!-- / .top-mask -->

<article id="about-content" class="content">

<article> 
<h4 class="first-name"></h4><!-- / .first-name -->
<h3 class="last-name"></h3><!-- / .last-name -->

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.
</article>   

</article><!-- / #about-content -->

<div class="bottom-mask"></div><!-- / .bottom-mask -->

</div><!-- / .content-container -->

</section><!-- / #about -->

---

因此，正如您在HTML中看到的，我将bio内容存储在自定义数据属性中，在jQuery中，当您单击列表项时，新内容应该加载到#about div中，但它不会这样做。有人看到问题了吗？提前感谢。

请注意，

.live

已被弃用，我认为您不需要在此处使用事件委派

如果希望

此

引用已单击的列表元素，即

.jesse

或

.matt

，则已将这些赋值放入事件处理程序中：

$('.jesse').click('click', function() {
   var bio = $(this).data('bio');
   $('#about').css('background-image','url('+$img+')');
   $('#about-content article').html(bio);
});

$('.matt').click('click', function() {
  var bio = $(this).data('bio');
  $('#about').css('background-image','url('+$img+')');
  $('#about-content article').html(bio);
});

当然，这可以统一到

$('#crew-list > li').on('click', function() {
    var bio = $(this).data('bio');
    $('#about').css('background-image','url('+$img+')');
    $('#about-content article').html(bio);
});

我不知道

$img

从哪里来，但我假设它是一个包含URL的字符串

---

我建议您阅读。

代码的上下文是什么？

此

指的是什么？此外，您正在设置任何HTML内容，您只会得到它。你看过文件了吗。这可能也有帮助。您是否在ready处理程序中运行JavaScript，如

$（function（）{/*your code*/}）或
$（document）.ready（function（）{/*your code*/}）`？您没有设置#about的html。。。它需要一个参数@菲利克斯克林：我刚刚编辑了一篇“这”是指已单击的列表项。@Sachlen刚刚对此进行了编辑。
$('#crew-list > li').on('click', function() {
    var bio = $(this).data('bio');
    $('#about').css('background-image','url('+$img+')');
    $('#about-content article').html(bio);
});