javascript - onClick 事件后控制台未记录

Question

我有类似于星级评分系统的 HTML div。

我正在尝试简单测试一些 javascript，以便当我单击星号时，控制台会记录“你好”。

<div class=rating>
    <div class="ratings_stars" data-rating="1"></div>
    <div class="ratings_stars" data-rating="2"></div>
    <div class="ratings_stars" data-rating="3"></div>
    <div class="ratings_stars" data-rating="4"></div>
    <div class="ratings_stars" data-rating="5"></div> 
</div>

$('.ratings_stars').on('click', function() {
    console.log('Hello');
});

JS 在一个单独的文件中，我已经很好地链接了。

标签： javascripthtmlcss

Answer 1

您的类需要用引号引起来，并将您的 jQuery 侦听器放在文档就绪函数中：

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
  <div class="ratings_stars" data-rating="1">Click me</div>
  <div class="ratings_stars" data-rating="2">Click me</div>
  <div class="ratings_stars" data-rating="3">Click me</div>
  <div class="ratings_stars" data-rating="4">Click me</div>
  <div class="ratings_stars" data-rating="5">Click me</div>
</div>