jquery in rails doesn't recognize click event

Question

New to using jQuery in Rails and can't get a div to be recognized for click or hover event. Using coffeescript as well, but compile looks fine. The divs all look good in the elements window in Chrome dev tools, but I don't get my console.log in the console window.

portion of my _form.html.haml

.field
  = f.label :question
  = f.text_field :question
%p Click the plus sign to add answers.
.field#answerone
  = f.label :answers
  = f.text_field :answers
#plusanswer
  = image_tag("plusWhite.png", :alt => "plus sign")

.actions
  = f.submit 'Save'

coffeescript:

$("#plusanswer").click ->
  console.log("here we are")
  $("#answerone").clone().appendto()

compiled javascript:

(function() {

  $("#plusanswer").click(function() {
    console.log("here we are");
    return $("#answerone").clone().appendto();
  });

}).call(this);

Is the way I'm doing the image_tag messing things up?

Are you wrapping the click event in a $(document).ready() handler? When I was starting out with CoffeeScript the difference between languages made me forgot to use that as well. — Only Bolivian Here
– Only Bolivian Here, Commented May 10, 2012 at 19:23
What is appendto? jQuery has appendTo but that wants an argument. And you do know that you'll be producing invalid HTML right? You can't have duplicate ids in your HTML. — mu is too short
– mu is too short, Commented May 10, 2012 at 20:00
Sergio, you were right of course. Couldn't give you a click up because you answered in a comment. — charliemagee
– charliemagee, Commented May 10, 2012 at 20:32
Hey mu, I'm trying to solve the problem you were helping me with the other day about adding fields to a form. Your suggestion was .clone, then .append. I tried chaining them together, then I tried appendTo (forgot the uppercase T). Now I switched from an id to a class, but nothing is happening. — charliemagee
– charliemagee, Commented May 10, 2012 at 20:34
@muistooshort -- I tried typing a series of answers separated by commas but get this error: Field was defined as a(n) Array, but received a String with the value "Today, Yesterday, 2 Days Ago". — charliemagee
– charliemagee, Commented May 10, 2012 at 20:40

Trevor Burnham · Accepted Answer · 2012-05-10 19:34:05Z

3

I believe Sergio is correct in his comment. If your JS comes before the page's markup, then the selector $(#plusanswer') runs before that element exists. You can verify this with the code

console.log $('#pluganswer').length

To fix this, wrap your code in jQuery's document ready wrapper, like so:

$ ->
  # the rest of your code goes here

This looks a bit magical, but here's how it works: When you pass a function to the jQuery object, $, it runs that function only after the document's "ready" event fires. So, again assuming that your code precedes your markup, you should get this behavior:

console.log $('#pluganswer').length    # 0
$ ->
  console.log $('#pluganswer').length  # 1, because the page's markup is loaded

answered May 10, 2012 at 19:34

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

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

2 Comments

charliemagee Over a year ago

Thanks Trevor. Hey, I got your Coffeescript book. Unfortunately it seems more appropriate for intermediate to advanced Javascript coders. I'm a beginner and stumbled onto Coffeescript just after I started. I went from constant errors due to incorrect ; and } and ) to almost no errors for "punctuation". Now it's all bonehead beginner errors in Javascript . . . and now haml, ruby, etc.

Trevor Burnham Over a year ago

Well, thanks for buying the book! I do strongly recommend learning the basics of JS before learning CoffeeScript. A great resource is the interactive jQuery Air courses on CodeSchool.

Collectives™ on Stack Overflow

jquery in rails doesn't recognize click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related