title: jQuery / javaScript - click / onclick event listener not working inside loop despite closure
body: <p>Me and my loops again...
  I'm trying to run a <code>for</code> loop across several <code>div</code>s, each being in the class "<code>tooltipBox</code>" but with different <code>id</code>s. In each of these <code>div</code>s is an input text field with class "<code>tttFalloutOrder</code>". What I want to do in the for loop is to attach a click-event-listener on each <code>.tttFalloutOrder</code> input field.</p>
  
  <p>This is my code so far:</p>
  
  <pre><code>function installListener(elementId) {
      $( "div#" + elementId + " &gt; .tttFalloutOrder" ).on("click", function() {
          alert("clicked on " + elementId);
      });
  }
  
  function runSimulation() {
      alert("running simulation...");
  
      $( "#lContent h2" ).html("Simulation &lt;b&gt;in progress...&lt;/b&gt;");
  
      var agents = $( "div.tooltipBox" );
      var rFOs = $( ".rFO" );
  
      var i, j = 0;
  
      for(i = 0, j = 0; i &lt; agents.length, j &lt; rFOs.length; i++, j++) {
          var ttl = rFOs[j].value;
  
          if((ttl == "undefined") || (ttl == "n")) {
              continue;
          } else {
              // function-factory als gscheite closure,
              // siehe http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
              // und http://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops?answertab=votes#tab-top
              (function(i, ttl) {
                  var agentId = agents[i].id;
  
                  installListener(agentId);
  
                  /*
                  $( "div#" + agentId + " &gt; .tttFalloutOrder" ).on("change keypress paste focus textInput input", function() {
                      alert(agentId + "just got changed!");
                  });
                  */
                  setTimeout(function() {
                      $("div#" + agentId + " &gt; div.offlineCover").fadeIn(500);
                  }, ttl*1000);
              })(i, ttl);
          }
      }
      $( "#lContent h2" ).html("Simulation &lt;b&gt;complete&lt;/b&gt;");
  }
  </code></pre>
  
  <p>As you can see, I am using a closure and even delegated the actual task of attaching the listener to another function, after reading in several SO-answers related to event-listeners in loops that this would help...though I honestly don't quite see how that would make any difference. Anyway, the click listeners still won't fire and frankly I don't understand what is - or rather what is not - happening here.</p>
  
  <p>Thanks in advance - you people at SO have always found a way to point unknowing souls like me into the right direction, and I really appreciate that.</p>
  
  <p><strong>Update</strong>
  Case closed due to my own stupidity...
  First off, yes, I had an undefined member sitting in my <code>installListener()</code> function.
  Second, the jQuery selector <code>$( "div#" + elementId + " &gt; .tttFalloutOrder" )</code> returned undefined, since the <code>&gt;</code> operator selects the second element, which has the first element as a direct parent. However, since <code>.tttFalloutOrder</code> is an input field sitting inside a <code>&lt;form&gt;</code> tag, that is not the case...</p>
  
  <p>I now scrapped the function <code>installListener()</code> and solved the issue with the following code:</p>
  
  <pre><code>function runSimulation() {
      alert("running simulation...");
  
      $( "#lContent h2" ).html("Simulation &lt;b&gt;in progress...&lt;/b&gt;");
  
      var agents = $( "div.tooltipBox" );
      var rFOs = $( ".rFO" );
  
      var waitUntilEvaluate = 0;
  
      var i, j = 0;
  
      for(i = 0, j = 0; i &lt; agents.length, j &lt; rFOs.length; i++, j++) {
          var ttl = rFOs[j].value;
  
          if((ttl == "undefined") || (ttl == "n")) {
              continue;
          } else {
              // function-factory als gscheite closure,
              // siehe http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
              // und http://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops?answertab=votes#tab-top
              (function(i, ttl) {
                  var agentId = agents[i].id;
  
                  $( "div#" + agentId + " .tttFalloutOrder" ).on("input", function() {
                      alert(agentId + "just got changed!");
                      $( "div#" + agentId + " .wasChanged" ).prop("checked", true);
                  });
  
                  setTimeout(function() {
                      $("div#" + agentId + " &gt; div.offlineCover").fadeIn(500);
                  }, ttl*1000);
  
                  waitUntilEvaluate = waitUntilEvaluate + ttl * 1000;
              })(i, ttl);
          }
      }
  
      console.log(waitUntilEvaluate);
      setTimeout(function() {
          $( "#lContent h2" ).html("Simulation &lt;b&gt;complete&lt;/b&gt;");
          evaluate();
      }, waitUntilEvaluate);
  }
  </code></pre>