Jquery mouseover and click not working on same element

Question

I have this code , mouseover is working fine but click event is not working

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/

@SRy are you sure about that? The two events can coexist on the same element... — mlnyc
– mlnyc, Commented Oct 11, 2013 at 20:16
Not sure whats not working... I went to the jsfiddle and it seems all good... — buzzsawddog
– buzzsawddog, Commented Oct 11, 2013 at 20:17
@buzzsawddog In Js fiddle Try clicking the star. alert is not firing — Manish
– Manish, Commented Oct 11, 2013 at 20:31
Okay So I tried in IE9 and Chrome and it does not work. Originally I tried in FF and it did work. My Chrome and FF are up to date. — buzzsawddog
– buzzsawddog, Commented Oct 11, 2013 at 20:42

PSL · Accepted Answer · 2013-10-11 20:59:07Z

2

Try this way:

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

Your issue could be because on mouse over you keep on changing the html and mouse over probably gets triggered over and again and there is no click event gets triggered as the elements which it is over(i) gets changed over and again so your event is lost(click/mouseover actually happens on i which gets bubbled up to the span's handlers). So instead just add/remove class which is what you just want.

edited Oct 11, 2013 at 20:59

answered Oct 11, 2013 at 20:42

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mlnyc · Accepted Answer · 2013-10-11 20:14:37Z

1

This worked for me...

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


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

I'd suggest to keep things simple and first make sure you wired up the event handlers properly. Only then would I add logic since that can complicate things. Take it from the sample above and make sure that works in your application. If so, you can start adding logic to it

answered Oct 11, 2013 at 20:14

mlnyc

2,7362 gold badges25 silver badges31 bronze badges

1 Comment

Manish Over a year ago

Both events are working fine if i remove the for loop. Check the fiddle click event is not working

Collectives™ on Stack Overflow

Jquery mouseover and click not working on same element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related