3

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

HTML 代码：

<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>

查询

$(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/

4

2 回答 2

2

试试这个方法：

$('.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);
});

小提琴

您的问题可能是因为在鼠标悬停时您不断更改 html 并且鼠标悬停可能会一次又一次地触发，并且没有触发单击事件，因为它结束的元素i会一次又一次地更改，因此您的事件丢失了（单击/鼠标悬停实际上发生在i它被冒泡到跨度的处理程序上）。因此，只需添加/删除您想要的类。

于 2013-10-11T20:42:18.250 回答
1

这对我有用...

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


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

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

于 2013-10-11T20:14:37.943 回答