jQuery event fired multiple times due to rails assets?

Question

I've looked at the post - jQuery click events firing multiple times and why is jQuery click event firing multiple times but I still can't figure out why this is happening.

I'm developing a rails-4.2.9 app and have a custom .js as follows:

$(function() {
    var $addNotificationButton = $('#add-notification-button')
    $addNotificationButton.on('click', function()
    {
      console.log("hi from js")
      //Code for launching a dialog       
    })
});

Now, when the page is first loaded and the button is clicked the first time I see only 1 print statement and see the dialog launching in a new route. When I close the dialog and re-click the button I can see 2 print statements on the console, next time 3 and so on and so forth.

My .js is put in Application.js and on the console I see one print statement from Application.js but the others which are getting tacked on are from VM-2058.js in Chrome and from foundation.js in Firefox. I'm not sure where or how these are popping up.

My questions are:

1) Why is this happening? I thought that the print statement will get executed only on the button click. Is that not how the jquery event handler works?

2) Although I can prevent it using one instead of on, one of my colleagues mentioned that we shouldn't be using one since it unbinds the event from the button after the first click and instead look into only loading the .js needed by the controller. Now that does work too but is this how we should be doing it? I realize that this is a more rails assets related question.

My application.js looks like this:

//= require_tree .
//= require ./notification (refers to the .js file above)

score 0 · Answer 1 · answered Jul 22 '17 at 18:19

0

The problem is you're setting multiple ".on('click'..)" handlers. I'm not sure about the remaining of your code but something must be calling/re-loading the JS file and with it executing that anonymous function multiple times, each time adding one "bind" to the event. That's why it increases with the number of clicks? Perhaps your dialog loads the JS again? No sure.

If you do:

$(function() {
    var $addNotificationButton = $('#add-notification-button')
    $addNotificationButton.off('click').on('click', function()
    {
      console.log("hi from js")
      //Code for launching a dialog       
    })
});

It should work as you expect, it will unbind any existing 'click' events though (so if you have other stuff binded it will need to be rebinded).

answered Jul 22 '17 at 18:19

m3characters

2,240
2
14
18

Does the "bind" occur every time the file is loaded on document ready or only when the button is clicked? Is there a way to check when the JS file loads? – linuxNoob Jul 22 '17 at 19:53
@linuxNoob that will depend on your application.html structure, the views you're loading, how you're loading the dialog, the remaining JS you have being rendered. If you show the views, what is the "dialog" and remaining JS you might have loading, including "ready" events and such, then perhaps we can pinpoint it – m3characters Jul 22 '17 at 20:07
Here is a link to application.html.haml - https://gist.github.com/anonymous/27dde6a9f5cb7dd13239ddb305eaf09b. There are no other events in the remaining JS except for the document ready and the button click. – linuxNoob Jul 22 '17 at 20:18
And I believe underneath the layers the dialog is a Bootstrap JS modal. – linuxNoob Jul 22 '17 at 20:23

jQuery event fired multiple times due to rails assets?

1 Answers1