Rails, JQuery: onClick event not attaching?

Question

I think I'm missing out on some fundamental aspect of how Javascript is handled by Rails.

I created a new Rails project using Ruby 2.1.0.

$ mkdir whatishappening
$ cd whatishappening
$ rails new .
$ rails generate scaffold post title body:text
$ rails db:migrate
$ rails server

I then proceeded to create a test post. After that I added:

whatishappening/app/views/posts/show.html.erb

<a href="#" id="foo">link</a>

whatishappening/app/assets/javascripts/posts.js (I renamed this from posts.js.coffee)

console.log("posts.js loaded");

$("#foo").on("click", function(event) {
  console.log("link clicked");
});

When I run via rails server and monitor the Javascript console in Chrome, I see:

> posts.js loaded

However, I don't see

> link clicked

when I click the link.

Can someone explain what's happening?

Community · Accepted Answer · 2017-05-23 11:52:59Z

2

You can check two things.

You added jQuery successfully, you can find how to added jQuery here.

Your binding code executes when foo is added to DOM, you can use document.ready to ensure that.

console.log("posts.js loaded");

$(document).ready(function(){
 $("#foo").on("click", function(event) {
    console.log("link clicked");
  });
});

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Feb 6, 2014 at 12:30

Adil

148k25 gold badges217 silver badges207 bronze badges

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

2 Comments

Roman Kiselenko Over a year ago

you need $(document).on('page:load', ready) if you use turbo-links

trushkevich Over a year ago

if you use turbo-links you need not only @Monk_Code's code (useful tip sure) but also you need to read this article staal.io/blog/2013/01/18/dangers-of-turbolinks

franksort · Accepted Answer · 2014-02-07 09:58:21Z

2

Using the answer from @Adil and the tip from @Monk_Code, I found the following the be the best solution considering that the default Rails 4 install includes Turbolinks.

app/assets/javascripts/posts.js

console.log("posts.js loaded");

var ready;
ready = function() {

  $("#foo").on("click", function(event) {
    console.log("link clicked");
  });

};

$(document).ready(ready);
$(document).on("page:load", ready);

answered Feb 7, 2014 at 9:58

franksort

3,1532 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Rails, JQuery: onClick event not attaching?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related