Coffeescript JQuery on click only working when page is refreshed

Question

I have a rails app that's using coffeescript. When I refresh the page or go to it directly using the URL, the following code works. When I click a link through to this page and try it out, it doesn't work at all. Why could that be?

jQuery ->
  console.log "Ready."
  $('form').on 'click', '.add_fields', (event) ->
    console.log "Click."
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

After a reload, I get Ready and Click when appropriate, and it works. After a click through from another page, I don't get anything. I also get this deprecation warning from chrome, which I'm not sure how to fix since it's coming from within JQuery itself:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
jquery.js?body=1:5375

The error only shows up when the code above isn't working. Is chrome blocking it? I'm using jquery-rails (3.0.4)

Are you using Turbolinks? If so, the handler on the form is getting blown away when the DOM gets refreshed. You need to wrap it in a page:restore page:load type handler. — davidfurber
– davidfurber, Commented Nov 27, 2013 at 20:39
Yes I am. I didn't realize I was at first. Thanks for that!! — mscriven
– mscriven, Commented Nov 28, 2013 at 15:41

Community · Accepted Answer · 2017-05-23 12:14:56Z

6

So it turns out it was turbolinks that was causing the problem. Thanks davidburber for pointing that out. Here's what I did to fix it (from Rails 4: how to use $(document).ready() with turbo-links)

ready = ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()


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

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Nov 28, 2013 at 15:43

mscriven

4194 silver badges11 bronze badges

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

1 Comment

user1130176 Over a year ago

also had to add $(document).on('turbolinks:load', ready); to get this to work

Webspirit · Accepted Answer · 2014-03-21 12:08:35Z

4

There's another, more simple solution here.

When you use turbolinks, which is default since Rails 4, also include [jquery.turbolinks gem][1]

The instructions are quite easy.

In your Gemfile add: gem 'jquery-turbolinks'
In your JavaScript manifest (default: app/assets/javascripts/application.js.coffee):
Require jquery.turbolinks immediately after jquery.
Require turbolinks after your scripts.

Example:

#= require jquery
#= require jquery.turbolinks
#= require jquery_ujs

# ... your other scripts here ...

#= require turbolinks

With the above you neither need any change in you code nor lines:

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

answered Mar 21, 2014 at 12:08

Webspirit

1,0533 gold badges12 silver badges18 bronze badges

1 Comment

David Gay Over a year ago

jquery-turbolinks is now deprecated: github.com/kossnocorp/jquery.turbolinks

Collectives™ on Stack Overflow

Coffeescript JQuery on click only working when page is refreshed

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related