Rails is not processing my jQuery .click events (can't even get an alert to pop up.)

Question

My rails 4 app isn't processing jQuery .click events at all.

From the Chrome browser console it works when I type this then click a h3.

$("h3").click(function() { return alert("Clicked that thang");});   // This alerts on click of a h3

But when I include the equivilent code (in CoffeeScript) in my app it does nothing..

# app/assets/javascripts/collaborators.js.coffee

alert("does this work?")        // yes this pops up an alert

$("h3").click ->
  alert("Does this work?")      // sadly nothing now happens when I click my h3's

I can tell that jQuery is loaded.

Chrome console:

>> $.fn.jquery
"1.10.2"

I also had a go at clearing the asset pipeline:

$> rake asset clean # but that didn't help me either.

Help, what's up, what am I missing?

Rails 4.0 app.

look at event delegation - http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Dec 05 '14 at 06:52
@ArunPJohny you missed a comma after your h3 but yeah this worked!! $(document).on 'click', 'h3', -> alert("Does this work?") — Evolve, Dec 05 '14 at 06:59
but why? (Ps add yours as an answer so its votable/comment able. — Evolve, Dec 05 '14 at 06:59
Thanks everyone I've got a few answers that work now, and I think you're all saying it's because my h3 wasn't loaded yet when my js ran. But which is the best approach. Let me know why your approach is better/when I should be using it or not. — Evolve, Dec 05 '14 at 07:04
Wow that's the best response I've ever had, like 6 of you in under 10 mins. I love StackOverflow. Thanks so much all. I'm accepting @ArunPJohny cause he was first in with a working answer but I really appreciate all your help. — Evolve, Dec 05 '14 at 07:12

Rajdeep Singh · Answer 1 · 2014-12-05T06:59:28.530

2

Try this

$("body").on "click", "h3", ()->
  alert("Does this work?")

If this is not the case, then turbolinks might be the culprit, do this

ready = ()->
  $("body").on "click", "h3", ()->
    alert("Does this work?")

$(document).ready(ready)
$(document).on('page:load', ready)

edited Dec 05 '14 at 06:59

answered Dec 05 '14 at 06:53

Rajdeep Singh

17,621
6
53
78

Just tried this, unfortunately this didn't work either for me. – Evolve Dec 05 '14 at 06:56
I have code that uses this exact structure in my application.js, in the js for this controller, eg collaborators.js.coffee are you suggesting I include the full code as above or can I just extend to get into the existing ready method that is being run? – Evolve Dec 05 '14 at 07:03

Dave · Answer 2 · 2014-12-05T07:05:34.363

1

It works successfully from console because your html code is present and so it can find h3 element and registers click event in DOM whereas, this might not be the case with coffee script. JS completes execution before HTML elements are loaded. so Try using document.ready as below or alternatively you can also use event delegation.

$(document).ready ->
 $("h3").click ->
  alert("Does this work?")

edited Dec 05 '14 at 07:05

answered Dec 05 '14 at 06:57

Dave

4,376
3
24
37

score 1 · Answer 3 · answered Dec 05 '14 at 06:58

1

Your element is not loaded when your JS gets executed, so it cannot find any h3 element. You have to wait until your document is ready:

$ ->
  $("h3").click ->
    alert("Does this work?")

answered Dec 05 '14 at 06:58

Sebastian vom Meer

5,005
2
28
36

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

The problem seems to be that you are dealing with dynamically created elements. The solution for that is to use event delegation

$(document).on 'click', 'h3', ->
  alert("Does this work?")

To read more about why
- Event binding on dynamically created elements?
- Understanding Event Delegation

edited May 23 '17 at 12:21

Community

1
1

answered Dec 05 '14 at 07:03

Arun P Johny

384,651
66
527
531

Is it just as well I use $(body).on here or is $(document).on better for any reason? – Evolve Dec 05 '14 at 07:06
2

@Evolve both are the same... but if you have a more specific ancestor for all the target `h3` element then use that... like a static `div#heparent` which will have all the `h3` elements then you can use `('#h3parent').on...` – Arun P Johny Dec 05 '14 at 07:10

Rails is not processing my jQuery .click events (can't even get an alert to pop up.)

4 Answers4