jQuery点击专辑Div显示信息Div功能失效求助

嘿，我瞅了你的代码，问题大概率出在DOM加载顺序上！你的jQuery代码写在<head>标签里，这时候页面的DOM元素还没完全加载出来，浏览器根本找不到#theraces这个元素，自然绑定不上点击事件啦。

下面给你几个靠谱的解决方案：

方案1：把JS代码移到<body>末尾 #

这是最直接的办法，等所有DOM元素都加载完成后再执行JS：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="queendisco.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
  <div class="teste"></div>
  <div class="discoestudio">
    <!-- 你的专辑Div代码保持不变 -->
  </div>
  <!-- 将JS代码移到body最后 -->
  <script type="text/javascript">
    $('#theraces').click(function() {
      $('.teste').show();
    });
  </script>
</body>
</html>

方案2：用$(document).ready()包裹代码 #

如果不想移动JS位置，就把代码放在ready函数里，确保DOM加载完成后再执行：

$(document).ready(function() {
  $('#theraces').click(function() {
    $('.teste').show();
  });
});

或者用更简洁的简写形式：

$(function() {
  $('#theraces').click(function() {
    $('.teste').show();
  });
});

方案3：使用事件委托（推荐，适配动态元素） #

如果以后可能会动态添加专辑元素，事件委托会更可靠，它能给未来创建的元素绑定事件：

$(document).on('click', '#theraces', function() {
  $('.teste').show();
});

另外，你可以按F12打开浏览器控制台，看看有没有报错（比如jQuery是否加载成功），这也是排查问题的好办法。

内容的提问来源于stack exchange，提问作者Vitor Camilo