Events firing twice or more

[leonardofaria]

I read troubleshooting section but I got this problem:

;(function(App){

    App.Supertestes = {};

    App.Supertestes.bindFunctions = function() {

        console.log('bind called');
        $(document).on("click", '.bt_login', function(e){

            console.log('.bt_login clicked');
            return false;
        });

    };


    App.Supertestes.init = function() {
        this.bindFunctions();
    }

})(App);

$(document).ready(function(){
  App.Supertestes.init();
});

I'm using the gem but the event is trigged twice or more. What is wrong? Do use the listeners inside App object is wrong?

[rstacruz]

yes, keep in mind that anything you call in $(function() { ... }) has to be idempotent.

You need to do either one of these:

a. Unbind the functions before binding them, or
b. Use jQuery event delegation outside the $(document).ready({ ... }) block.

Perhaps you can split your .init() into things that will be ran only once (ie, outside document.ready), and things that will be ran on every page load (inside document.ready?)

App.Supertestes.bindFunctions();

$(document).ready(function () {
  App.Supertestes.initOtherThings();
});

[lokeshjain2008]

How, to write this code with CoffeeScript.
as i do

jQuery ->
    $('.chosen-select').chosen
       allow_single_deselect: true
       no_results_text: 'No results matched'
       console.count 'called'

I see count multiple time and this increases every time i click my Home button.

[lokeshjain2008]

Plz, help me this behaviour stops me working on some of the functionality for my website.

[rstacruz]

You'll need to un-initialize chosen somehow. Perhaps chosen isn't compatible with Turbolinks.

[acandael]

Hi,

I'm also having this issue.

Before I implemented the jquery-turbolinks , this responsive navigation menu wich changes the horizontal menu in a dropdown menu for mobile screens was working fine:

<script>
  $(document).ready(function() {
    var menu = $('#navigation-menu');
    var menuToggle = $('#js-mobile-menu');
    var signUp = $('.sign-up');

  $(menuToggle).on('click', function(e) {
     e.preventDefault();
     menu.slideToggle(function(){
      if(menu.is(':hidden')) {
        menu.removeAttr('style');
      }
    });
  });
</script>

now, when clicking the menu in dropdown mode, it drops down and pulls up a couple of times and then stays pulled up.

This behaviour can be checked here:

http://178.62.173.211

how can I fix this?

thanks for your help,

Anthony

[acandael]

I added the unbind() method to the menuToggle element, and the issue seems fixed now:

  var menuToggle = $('#js-mobile-menu').unbind();

[dnagir]

As far as I can see, this issue is caused by the JS being within the page rather than in an external file.

If you'll put this JS on one single page:

    <script type="text/javascript">
      $(function() {
        alert('hiii')
      });
    </script>

And navigate to that page, you'll obviously see the alert.
But you will also see the alert when you navigate away from the page to any other, that doesn't even have the JS above.

When you go to the page with that JS again, you now see two alerts and so on.

So there's nothing to do with idempotency.

And as far as I can see, the jquery.turbolinnks is being used correctly here.

The only workaround I can see ATM is to move that JS into a separate file, which is a bit of a shame for small bit of initialiser code.

Can you confirm this? Is it misused or that's an actual issue?

[giugrilli]

i have a ready() function that is fired when page loads normally, and when turbolinks loads a page

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

With this configuration the ready function fires once per page load, in any other turbolinks apps.
But when using jquery mobile and jquery.turbolinks it fires twice, both events are triggered.
Commenting out $(document).on('page:load', ready); solved this issue for me.