Question

我有这个代码，鼠标悬停工作正常，但点击事件不起作用

HTML CODE：

<span class="rating">
<span class="rating1 rate" data-rating="1"  title="1"><i class="icon-star-empty" ></i>        </span>
<span class="rating2 rate" data-rating="2" title="2"><i class="icon-star-empty"  ></i></span>
<span class="rating3 rate" data-rating="3" title="3"><i class="icon-star-empty"  ></i></span>
<span class="rating4 rate" data-rating="4" title="4"><i class="icon-star-empty"  ></i></span>
<span class="rating5 rate" data-rating="5" title="5"><i class="icon-star-empty"  ></i></span>

JQUERY

$(document).on('mouseover', '.rate', function () {
   var rating = parseInt($(this).attr('data-rating'), 10);
   var rate = rating + 1;

   for (var j = 1; j < rate; j++) 
      {
       $('.rating' + j).html('<i class="icon-star" title="' + j + '" data-rating="' + j + '"></i>');
      }

   for (var i = rate; i < 6; i++) 
      {
       $('.rating' + i).html('<i class="icon-star-empty" title="' + i + '" data-rating="' + i + '"></i>');
      }
    });


$(document).on('click', '.rate', function () {
  var rate = parseInt($(this).attr('data-rating'), 10);
  alert(rate);
 });

JSFIDDLE http://jsfiddle.net/code_snips/EnjCH/1/

Answer 1

尝试这种方式：

$('.rate').on('mouseenter', function () {
    var rating = parseInt($(this).attr('data-rating'), 10),
        rate = rating + 1, $rates = $('.rate');
    $rates.find('.icon-star').removeClass('icon-star').addClass('icon-star-empty');
    $rates.filter(':lt(' + ($rates.index(this) + 1) + ')').find('i').removeClass('icon-star-empty').addClass('icon-star ');

});


$('.rate').on('click', function () {
    var rate = parseInt($(this).attr('data-rating'), 10);
    alert(rate);
});

<强> Fiddle

你的问题可能是因为在鼠标悬停时你继续改变html和鼠标可能一次又一次被触发，并且没有点击事件被触发，因为它结束的元素（i）被改变了一次又一次，所以你的事件丢失了（点击/鼠标悬停实际上发生在i上，它被冒泡到了跨区的处理程序）。所以只需添加/删除你想要的类。

Answer 2

这对我有用......

$('.rate').on('mouseover', function () {
    console.log('in mouseover');
});


$('.rate').on('click', function () {
    alert('in click');
});

我建议保持简单，首先要确保正确连接事件处理程序。只有这样我才能添加逻辑，因为这会使事情复杂化。从上面的示例中获取它，并确保它适用于您的应用程序。如果是这样，您可以开始向其添加逻辑

Jquery鼠标悬停并单击不在同一元素上工作

2 个答案: