-2

I have this code with the click() function and it works:

$(document).ready( function() {
  $('.rate .fa-star').click( function() {
    alert('Clicked!');
  });
});

However this code with the on() function doesn't work and I don't know why

$(document).ready( function() {
  $('body').on('click', '.rate .fa-star', function() {
    alert('Clicked!');
  });             
});

Any idea what could be the problem? In the console I don't see any errors at all.

UPDATE:

I have this line of code somewhere else and when I comment it the on() works as well:

$(".rate i.fa-star").click(function(e) { e.stopPropagation(); });

The problem is, I need this line for another functionality on my site. So, any idea how to make on() work with this line of code like the click() is working now?

John Doeherskij
  • 2,269
  • 3
  • 13
  • 19
  • 1
    @RoryMcCrossan The OP claims `click()` works and `on()` doesn't work. – Chris Dąbrowski Mar 22 '17 at 10:09
  • @KrzysztofDąbrowski thanks - my bad. – Rory McCrossan Mar 22 '17 at 10:10
  • 1
    @John could you please edit your question to include a working demo of the problem - or the least your HTML – Rory McCrossan Mar 22 '17 at 10:10
  • @RoryMcCrossan Well, you just prevented me from doing it, or Stackoverflow, while editing my post. Anyways, just add `
    ` before the script and that's all. I am not allowed to that, SO is saying that it has to be more sustantial than your edit ;)     – John Doeherskij Mar 22 '17 at 10:14
  • Try: `$(document).on(...` instead of 'body' – freedomn-m Mar 22 '17 at 10:14
  • I have updated the question with more info. If I comment the line `$(".rate i.fa-star").click(function(e) { e.stopPropagation(); });` then `on()` is working as well, however, I need that line for another functionality on my site. So, if you know how to make work on() with this line in my code that would be awesome. Also, please consider removing the downvotes after this update. Thank you. – John Doeherskij Mar 22 '17 at 10:24
  • @RoryMcCrossan Please, can you check my question now, I have updated the info of the reason what is blocking the `on()` function, but still don't know how to fix it. – John Doeherskij Mar 22 '17 at 10:29
  • You'll have to review your use of e.stopPropagation. If you've stopped the bubbling, then you won't receive the bubbled event - that's exactly what stopPropagation is for. One alternative is to *raise* a custom event on click and handle it as appropriate. Can't really help you without knowing more details as to why you feel you need to stop all clicks while at the same time receiving all clicks but can't call the all-clicks-code within the stop-clicks handler. – freedomn-m Mar 22 '17 at 10:45
  • @JohnDoeherskij Krzysztof surmised that was the issue. His answer below gives you the solution – Rory McCrossan Mar 22 '17 at 10:48

2 Answers2

5

I think that some function has to prevent this click event from bubbling up to the body element.

Maybe there's some return false or event.stopPropagation() in some event handler somewhere in the way between this element and body.

I've checked your code on my website and it works like a charm.

Chris Dąbrowski
  • 1,902
  • 1
  • 12
  • 12
  • You are probably right, I have this code somewhere else `$(".rate .fa-star").click(function(e) { e.stopPropagation(); });` However, it's for click() and not on(). Can I alter it somehow so for on() it is ok too? how to do that? – John Doeherskij Mar 22 '17 at 10:19
  • I'm not sure what you exactly mean. But if you want to use `.on()` on a `body`, you mustn't stop the propagation of this event. – Chris Dąbrowski Mar 22 '17 at 10:25
  • It's impossible. But in most cases you don't have to use `event.stopPropagation()`. You have to do it in another way. – Chris Dąbrowski Mar 22 '17 at 10:37
1

$(".rate i.fa-star").click(function(e) { e.stopPropagation(); })

If this line comes before your other event handler, then you've found the culprit.

When you call e.stopPropagation(), jQuery stops the event at that line, and other event handlers will NOT receive the event.

If you want your event handler to work, you need to delete the other handler that only stops the event from propagating.

guilherme.oc97
  • 431
  • 1
  • 3
  • 13
  • the question is if I can use `$(".rate i.fa-star").on(function(e) { e.stopPropagation(); })` ? – John Doeherskij Mar 22 '17 at 11:04
  • From my answer: `If you want your event handler to work, you need to delete the other handler that only stops the event from propagating.` So, no, you can't use `e.stopPropagation()`. – guilherme.oc97 Mar 22 '17 at 11:24