Creating closures in a loop in JavaScript

Question

I have this scenario:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
var actions = {
    'view' : function(){alert("view");},
    'history': function(){alert("history");},
    'renewal': function(){alert("renewal");}
}
for(var action in actions){
    $('.' + action).live('click', function(e){
        e.preventDefault();
        if(actions[action])
            actions[action]();
    });
}
</script>
</head>
<body>
    <a class="view" href="#">view</a>
    <a class="history" href="#">history</a>
    <a class="renewal" href="#">renewal</a>
</body>
</html>

I think a closure is created, since clicking a link always alerts "renewal" and I am not able to fix it.

This basic question must account for about 10% of all JavaScript questions here :-) — Pointy
– Pointy, Commented Feb 24, 2011 at 15:50
Are you referring to "closure" as some sort of error? Because it isn't. — BoltClock
– BoltClock, Commented Feb 24, 2011 at 15:51
possible duplicate of Javascript closure inside loops - simple practical example — rds
– rds, Commented Jan 17, 2013 at 17:52

TJHeuvel · Accepted Answer · 2011-02-24 15:52:14Z

2

Why dont you try using the classname in the click event?

I'm no jQuery expert, but something like this:

$('.' + action).live('click', function(e)
{
 e.preventDefault();
 if(actions[this.className])
   actions[this.className]();
});

answered Feb 24, 2011 at 15:52

TJHeuvel

12.6k4 gold badges40 silver badges46 bronze badges

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

Comments

Andrea · Accepted Answer · 2011-02-24 15:53:27Z

It is indeed. You can replace

for(var action in actions){
    $('.' + action).live('click', function(e){
        e.preventDefault();
        if(actions[action])
            actions[action]();
    });
}

with

for(var action in actions){
    $('.' + action).live('click', function(e){
        e.preventDefault();
        var currentAction = $(e.target).attr('class');
        if(actions[currentAction])
            actions[currentAction]();
    });
}

By the way, the problem is not that there is a closure. Indeed, if there was not a closure, the value of the variable action would not be rembered at all! The problem is that all the functions in the loop refer to the same variable action, that at the end of the loop will have the value renewal.

epascarello · Accepted Answer · 2011-02-24 15:56:18Z

0

There are better ways of doing this, but to make your solution work:

for(var action in actions){
    (function(myAction){
        $('.' + myAction).live('click', function(e){
            e.preventDefault();
            if(actions[myAction])
                actions[myAction]();
        });
    })(action);
}

You are going to find out that live is not going to cancel the default action, You are going to want to use delegate

answered Feb 24, 2011 at 15:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Ioannis Karadimas · Accepted Answer · 2011-02-24 15:56:26Z

0

That's not what happens. Instead, your event handler function references the action variable, which will always have the value 'renewal', since that 's the last item in the list after the loop is done. The best way to go about it is to replace the loop with something like that:

for(var action in actions) {
    $('.' + action).live('click', function(e){
        e.preventDefault();
        var action = $(e.currentTarget).attr('class');
        if(actions[action]) actions[action]();
   });
}

answered Feb 24, 2011 at 15:56

Ioannis Karadimas

7,9263 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Creating closures in a loop in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related