closure in loop:variable declared in loop not being properly presetting into handler function, when bind an event listener

Question

I'm writing a logging function for automation unit test.

html elements structure:

<li> 
  <strong>
  <ol>
<li>
  <strong>
  <ol>

I want to make it when I click on the <strong>, the <ol> which under same <li> be toggle.

code:

for(var i = 0, l = logSuites.length; i < l; i++) {
        var suite = logSuites[i];
        $("#tests").append('<li><strong>....</strong></li>');
        var suiteSl = $('#tests > li:nth-child(' + (i + 1) + ')');
        var caseli = "<li>...</li>...";
        ...
        suiteSl.append('<ol style="display:none">' + caseli + '</ol>');
        var caseLiSl = suiteSl.children('ol');
        var toggleCases = function() {
            caseLiSl.toggle();
        };
        suiteSl.children('strong').bind('click', toggleCases);
    }

the problem is everytime the event being triggered, the last <ol> be toggled.. The variable caseLiSl in function toggleCases is always the last time it settled in the for loop

A common problem with the powerful javascript closures

antonjs
– antonjs

2012-03-26 10:57:22 +00:00
Commented Mar 26, 2012 at 10:57 — antonjs
– antonjs, Commented Mar 26, 2012 at 10:57

Community · Accepted Answer · 2017-05-23 10:08:40Z

7

That’s a more common problem. We use closures in a loop (for or while) and it always keep the last value of the increment.

Answer can be found in this question: Doesn't JavaScript support closures with local variables?

edited May 23, 2017 at 10:08

CommunityBot

11 silver badge

answered Mar 26, 2012 at 10:58

antonjs

14.3k15 gold badges70 silver badges91 bronze badges

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

Comments

Nicola Peluchetti · Accepted Answer · 2012-03-26 10:57:09Z

2

I think you should do

suiteSl.children('strong').bind('click', function(){
   $(this).children('ol').toggle();
});

in this way the this variable refers to the clicked element and you toggle only it's direct <ol> children

answered Mar 26, 2012 at 10:57

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

1 Comment

ThemeZ Over a year ago

I may not be clear but <ol> isnot <strong> 's child but <li>'s. $(this).parent().children('ol').toggle(); works, thanks

Jani Hartikainen · Accepted Answer · 2012-03-26 10:58:38Z

2

This is again the usual closure in a loop problem.

You probably should read this: http://www.mennovanslooten.nl/blog/post/62

answered Mar 26, 2012 at 10:58

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

Collectives™ on Stack Overflow

closure in loop:variable declared in loop not being properly presetting into handler function, when bind an event listener

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related