I realise that I probably need to declare the onclick event globally, but I am trying to avoid using the --bare
tag when compiling.
This is the code I am trying to get working...
jQuery ->
$('.tabs_image').click ->
$(this).addClass('tabs_selected')
$('.tabs_video').removeClass('tabs_selected')
$('#image_upload_form').show()
$('#video_upload_form').hide()
return
$('.tabs_video').click ->
$(this).addClass('tabs_selected')
$('.tabs_image').removeClass('tabs_selected')
$('#image_upload_form').hide()
$('#video_upload_form').show()
return
return
It works fine once the page is hard refreshed (refresh clicked) in the browser Chrome.
I have tried $ =>
, $(document).ready ->
, and $(document).ready =>
.
For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs.
The click event occurs when an element is clicked. The click () method triggers the click event, or attaches a function to run when a click event occurs. Optional.
If you try to bind the elements that are dynamically added to the DOM using the click () method of jQuery, this will not work, because it only binds the click event to elements that exist at the time of the “binding”. To bind the click event to all existing and future elements, use jQuery’s on () method. see the following example.
To bind the click event to all existing and future elements, use jQuery’s on () method. see the following example. <p>Click the button below to dynamically add new items.
I found the crux of the problem - My Coffeescript was fine, it was because of a gem called Turbolinks that the code was not triggering. It keeps the current page instance alive and replaces only the body and the title in the head, which means you can't rely on
DOMContentLoaded
orjQuery.ready()
to trigger your code. This is why the script would seem to work when the page was hard refreshed (refresh clicked).
Add data-no-turbolink
to the parent container of the link(s) like so...
<a href="/">Home (via Turbolinks)</a>
<div id="some-div" data-no-turbolink>
<a href="/">Home (without Turbolinks)</a>
</div>
jQuery.ready()
Using the event hook page:change
, you can replace the jQuery.ready()
with $(document).on 'page:change', ->
or, even better $(document).on 'ready page:change', ->
; better, because it means that even if turbolinks is not running (because of being on an old browser version maybe), the call will still trigger due to ready
being there.
It is best to use
page:change
instead ofpage:load
. The former event hook fires when the page is loaded from the server or from the client-side cache, whereas the latter event hook only fires when a new body element has been loaded into the DOM (source).
...or...
You can use the jquery-turbolinks gem.
Gemfile:
gem 'jquery-turbolinks'
bundle install
and then add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
I'd argue that you should be using event delegation anyway.
Try something like this and see if you get better results:
$ ->
$('body').on 'click', '.tabs_image', ->
# do stuff
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With