Question

我有此代码：

$(document).ready(function(){
$('.laravel-like').on('click','i',function(){
  if($(this).hasClass('disabled'))
   return false;
   alert($("#like").attr("data-item-id"));
alert($("#like").attr('data-vote'));
)}

当我在页面上的i潜水中单击laravel-like标签时，它根本不起作用。它甚至没有在控制台中记录任何错误。

但是，当我将'laravel-like'更改为document时，它才起作用，但仅当我单击页面上的任何位置时才起作用。我希望它仅在单击i元素时才起作用在laravel-like div

内

这是我的html：

<div class="laravel-like">
    <i id="like"
       class="icon   laravelLike-icon thumbs up"
       data-item-id="9"
       data-vote="1">
    </i>
    <span id="9-total-like">1</span>
    <i id="dislike"
       class="icon  outline laravelLike-icon thumbs down"
       data-item-id="9"
       data-vote="-1">
   </i>
   <span id="9-total-dislike">0</span>
</div>

请帮助。

Answer 1

首先，您显示的JavaScript有两个语法错误。

)}应该是})
您在代码末尾缺少另一个})

接下来，您的点击处理程序将设置为仅在i元素内部的.laravel-like元素上运行。如果您的i元素没有任何可见内容可供点击，则click事件不会触发。在这里，我只是提供了X作为两个i元素的内容，如果您单击其中的任何一个，它将起作用。

$(document).ready(function(){
  $('.laravel-like').on('click','i',function(){
    if($(this).hasClass('disabled'))
     return false;
    alert($("#like").attr("data-item-id"));
    alert($("#like").attr('data-vote'));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="laravel-like">
    <i id="like"
       class="icon laravelLike-icon thumbs up"
       data-item-id="9"
       data-vote="1">x
    </i>
    <span id="9-total-like">1</span>
    <i id="dislike"
       class="icon outline laravelLike-icon thumbs down"
       data-item-id="9"
       data-vote="-1">x
   </i>
   <span id="9-total-dislike">0</span>
</div>

jQuery-为什么我的.on（'click'）事件处理程序不起作用？

1 个答案: