calling javascript function too many times

Question

I'm just getting into Javascript and I've run into the same problem a number of times with different pieces of code: I have a function that creates a type of element and a function that does something with that type of element. It seems obvious to me that I need to call the "do something" function after the element has been created, but when I do, it ends up running more times than I'd like.

Here's an example of my problem:

function rightClick(){
    $(".element").mousedown(function(e){
        switch (e.which){case 3: alert( $(this).attr("id") )};
    });
};

function doubleClick(){
    var counter = 0;
    $(document).dblclick(function(e){
        counter++;
        elementId = "element" + counter;
        $("#new_elements").append("<div class='element'"          +
                                   "id='"    + elementId + "'"   +
                                   "style='position:absolute;"   +
                                   "top:"    + e.pageY + ";"     +
                                   "left:"   + e.pageX + ";'>"   +
                                    elementId+ "</div>");
    rightClick();
});

In this example, if I create 4 elements and I right-click on the first one I created, I end up getting 4 alert boxes instead of one. If I right-click on the second element I created, I get three alerts; the third: 2 alerts; the fourth: one alert.

Can anyone explain to me why this is happening, and how to fix it so that I only get one alert each time I right-click on an element?

Jamund Ferguson · Accepted Answer · 2012-05-14 21:27:10Z

4

Binding is the act of associating an event with a DOM element. The .mousedown and similar events only bind on elements that already exist.
Each time you call rightClick() you bind a new event to all current .element elements.
You can bind functions to the same element as much as you'd like, which is why you see the function being called many times.
For dynamic elements should checkout .on or .delegate which work like this:

Example of jQuery.fn.on

 $(document.body).on("mousedown", ".element", function(e) {
   if (e.which === 3) alert($(this).attr("id"));
 });

Example of jQuery.fn.delegate

 $(document.body).delegate(".element", "mousedown", function(e) {
   if (e.which === 3) alert($(this).attr("id"));
 });

Only call this once and you should be pretty much okay. If you're not using jQuery 1.7 or higher you will want to use .delegate() instead of .on.

edited May 14, 2012 at 21:27

answered May 14, 2012 at 21:21

Jamund Ferguson

17k3 gold badges47 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ben Over a year ago

Thanks for the detailed response; what you've written makes a lot of sense and I'm about to check out the documentation on .on() and .delegate(). However, it still doesn't work. Any other ideas?

aziz punjani · Accepted Answer · 2012-05-15 02:08:13Z

You do not need to bind the event everytime you insert and element into the DOM. You can use .on to attach event handlers for elements that are dynamically inserted.

$(document).on('mousedown','.element', (function(e){
    switch (e.which){
            case 3: alert( $(this).attr("id") ); 
            break; 
    };
});

var counter = 0;
$(document).dblclick(function(e){
    counter++;
    elementId = "element" + counter;
    $("#new_elements").append("<div class='element'"          +
                               "id='"    + elementId + "'"   +
                               "style='position:absolute;"   +
                               "top:"    + e.pageY + ";"     +
                               "left:"   + e.pageX + ";'>"   +
                                elementId+ "</div>");
});

ubik · Accepted Answer · 2012-05-14 21:21:41Z

0

I believe you are adding the same handler several times, meaning that when you click a button you are re-binding the action to the same function.

answered May 14, 2012 at 21:21

ubik

4,5802 gold badges25 silver badges30 bronze badges

Comments

steve_c · Accepted Answer · 2012-05-14 21:22:04Z

0

You've bound your event handler to the class '.element'. This means that every element with the class '.element' on your page will fire that event when the right click occurs.

answered May 14, 2012 at 21:22

steve_c

6,2954 gold badges35 silver badges43 bronze badges

Collectives™ on Stack Overflow

calling javascript function too many times

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related