0

I just got through figuring out that I need to watch out for duplicate event handlers in jquery if I'm dynamically assigning them multiple times as described here: http://www.parallaxinfotech.com/blog/preventing-duplicate-jquery-click-events

Do I need to watch out for this or handle it somehow if I'm declaring a function dynamically within another function multiple times? How does JavaScript really handle this? Does it only use the last function that was called or does it only instantiate a function once at load time? From what I can tell it's not running the function multiple times.

$(document).on("click",".button",function() {

    function alertThem()
    {
        alert('Clicked!');
    }
    alertThem();
});
Eric
  • 476
  • 2
  • 8
  • 20

3 Answers3

0

JavaScript will remember every function you're assigning it.

$('button').click(function(){
    alert('hi')
})
$('button').click(function(){
    alert('hi')
})

The code above will alert "hi" twice. If you're assign new function and you want to clear the old one, you can do unbind().click(). what it will do is it will unbind all events, or you can do unbind('click') which will unbind just the click. see https://jsfiddle.net/rznbtc1p/

$('button').click(function(){
    alert('hi')
})
$('button').unbind().click(function(){
    alert('hi')
})
chungtinhlakho
  • 870
  • 10
  • 21
0

The link you provided does not work (gives me timeout) so I hope I understood what you asked.

About what happens there:

In your script you created a closure and bound it to a click event. Each time you click on the element with class button, the anonymous function is triggered. Each time is triggered it defines function alertThem(), and calls it. Only once defines it, only once calls it. The scope of that function is its parent, the closure. That function is not defined outside that scope, so no need to worry about double definition.

Side note here: Personally as a rule of thumb don't think is a good idea to define functions like this, but if it suits your project... go for it.

Now about duplication. Since I cannot see the link, I think you are referring to double event binding.

In js can bind any number of events to the same element. You can for example bind on click something that says "Hi, you clicked me", then bind also on click something that says "Hi, you received a message before saying you clicked me". When you click that element, you will see both messages.

This can actually become a problem. You have 3 options:

  1. Be really careful how you bind events

  2. Keep tracking of what you bound

  3. Check if events are already bound (although that is a bit unreliable). You can check how here: jQuery find events handlers registered with an object

Community
  • 1
  • 1
zozo
  • 8,230
  • 19
  • 79
  • 134
0

In your code snippet, you aren't creating duplicate event handlers.

What is happening in your snippet is that you are creating a new function alertThem within the scope of your click handler function and then executing it in the line below.

derp
  • 2,300
  • 13
  • 20