title: Javascript closure not working as expected in for loop
body: <p>I have this page, where we have three menus</p>
  
  <pre><code>&lt;ul class="support-menu nav navbar-nav nav_menu nav nav-pills nav-stacked full-width"&gt;
          &lt;li class="nav_menu"&gt;&lt;a href="#" id="manage"&gt;Manage&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_menu"&gt;&lt;a href="#" id="asset"&gt;Asset&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_menu"&gt;&lt;a href="#" id="report"&gt;Report&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>On the document ready, following code is written</p>
  
  <pre><code> $(function() {
       var actionUrlMap = {
          manage: "/support/manage",
          asset: "/support/asset",
          report: "/support/report"
      };
      var loadUrl = function (url) {
          $("#resultDiv").load(url);
      };
      for (var prop in actionUrlMap) {
          $("body").on("click", "#" + prop, function (e) {
              loadUrl(actionUrlMap[prop]);
          });
      };
  });
  </code></pre>
  
  <p>But no matter which menu I click, I always get the page</p>
  
  <p><code>Welcome to Report Support Section</code></p>
  
  <p><strong>It looked to me that the problem is related with closure, so I changed the code to following</strong></p>
  
  <pre><code>for (var prop in actionUrlMap) {
          var localProp = prop;
          var localUrl = actionUrlMap[localProp];
          $("body").on("click", "#" + localProp, function (e) {
              loadUrl(localUrl);
          });
      };
  </code></pre>
  
  <p>I thought that <strong>now since I am capturing the local variable, it should load the correct url, but click on any of the menu options still loads the</strong></p>
  
  <p><code>Welcome to Report Support Section</code></p>
  
  <p><strong>I also tried this</strong></p>
  
  <pre><code>for (var prop in actionUrlMap) {
          $("body").on("click", "#" + prop, function (e) {
              var localProp = prop;
              var localUrl = actionUrlMap[localProp];
              loadUrl(localUrl);
          });
      };
  </code></pre>
  
  <p>Again, thinking that <strong>now I have captured the property in local variable, it should load the correct url, but it is still loading the report help section</strong>.</p>
  
  <p>What am I missing here? Am I understanding the whole closure concept wrong? Or something else is missing from the code?</p>