Skip to content
jQuery plugin for drop-in fix binded events problem caused by Turbolinks
CoffeeScript Ruby
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib
spec
src
vendor/assets/javascripts
.gitignore
CONTRIBUTING.md
Gemfile
Guardfile
LICENSE.md
README.md
Rakefile
jquery-turbolinks.gemspec
package.json

README.md

jQuery Turbolinks

Do you like Turbolinks? It's easy and fast way to improve user experience of surfing on your website.

But if you have a large codebase with lots of $(el).bind(...) Turbolinks will surprise you. Most part of your JavaScripts will stop working in usual way. It's because the nodes on which you bind events no longer exist.

I wrote jquery.turbolinks to solve this problem in my project. It's easy to use: just require it immediately after jquery.js. Your other scripts should be loaded after jquery.turbolinks.js, and turbolinks.js should be after your other scripts.

Sponsored by Evil Martians.

This project is a member of the OSS Manifesto.

Usage

Gemfile:

gem 'jquery-turbolinks'

JavaScript manifest file:

//= require jquery.turbolinks

And it just works!

$.setReadyEvent

By default ready function is bound to page:load event.

If you want to change it use $.setReadyEvent function:

$.setReadyEvent('page:change');

$.setFetchEvent

By default right after trigger page:fetch $.isReady is set to false. And after page:load is set to true.

If you want to change default behaviour you can use $.setFetchEvent:

$.setReadyEvent('custom_loading_event');

Troubleshooting

Events firing twice or more

If you find that some events are being fired multiple times after using jQuery Turbolinks, you may have been binding your document events inside a $(function()) block. For instance, this example below can be a common occurrence and should be avoided:

/* BAD: don't bind 'document' events while inside $()! */
$(function() {
  $(document).on('click', 'button', function() { ... })
});

You should be binding your events outside a $(function()) block. This will ensure that your events will only ever be bound once.

/* Good: events are bound outside a $() wrapper. */
$(document).on('click', 'button', function() { ... })

Changelog

This project uses Semantic Versioning for release numbering.

1.0.0-rc2 (January 31, 2013)

  • Fix problem with 3rd-party libraries #12, #15
  • Reopen #8

1.0.0-rc1 (November 28, 2012)

  • Set $.isReady to false after page:fetch #6;
  • add $.setFetchEvent function;
  • remove all delegated events after trigger fetch event #8.

1.0.0-rc (November 8, 2012)

  • Add turbolinks as dependency (kudos to @gbchaosmaster);
  • run callback after adding to waiting list if $.isReady #6.

0.2.1 (October 15, 2012)

  • Pass jQuery object to each callback #4

0.2.0 (October 10, 2012)

  • Change event: page:change -> page:load (kudos to @davydotcom);
  • added ability to change ready event via $.setReadyEvent

0.1.0 (October 3, 2012)

  • First, initial release

Contributors

Idea and code by @kossnocorp.

The MIT License

Something went wrong with that request. Please try again.