title: Using Ajax callback variable values in JQuery dynamic click handlers
body: <p>I'm doing a simple ajax query which retrieves a variable-length list of values as JSON data. I'm trying to make a list based on this data which has click-functions based on the values I got from the JSON query. I can make this work just fine by writing the onClick-methods into the HTML like this:</p>
  
  <pre><code>function loadFooList() {
      var list_area = $("#sidebar");
      list_area.html("&lt;ul&gt;")
      $.ajax({
      type: 'GET',
          url:'/data/foo/list',
      dataType: 'json',
      success: function (json) {
          $.each(json, function(i, item) {
          var link_id = "choosesfoo" + item.id;
          list_area.html(list_area.html()
                     + "&lt;li&gt; &lt;a href='#' onClick='alert(\"" + 
                     link_id + "\");'&gt;" + 
                     item.name + "&lt;/a&gt;&lt;/li&gt;");
          });
          list_area.html(list_area.html() + "&lt;/ul&gt;");
      }
      });
  }
  </code></pre>
  
  <p>I don't like writing the onClick-function into the HTML and I also want to learn how to create this same functionality via JQuery click-function.</p>
  
  <p>So the problem is obviously variable-scoping. My naive attempt here obviously won't work because the variables are no longer there when the click happens:</p>
  
  <pre><code>function loadFooList2() {
      var list_area = $("#sidebar");
      var link_ids = Array();
      list_area.html("&lt;ul&gt;")
      $.ajax({
      type: 'GET',
          url:'/data/foo/list',
      dataType: 'json',
      success: function (json) {
          $.each(json, function(i, item) {
          var link_id = "choosefoo" + item.id;
          list_area.html(list_area.html()
                     + "&lt;li&gt; &lt;a href='#' id='" + link_id  + "'&gt;"+item.name+"&lt;/a&gt;&lt;/li&gt;");
          link_ids.push(link_id);
          });
          list_area.html(list_area.html() + "&lt;/ul&gt;");
          for (link_index=0; link_index&lt;link_ids.length; link_index++) {
          $("#" + link_ids[link_index]).click(function() {
              alert(link_ids[i]); 
          });
          }
      }
      });
  }
  </code></pre>
  
  <p>Obviously I'd like to do something else than just alert the value, but the alert-call is there as long as I can get that working and move forward.</p>
  
  <p>I understand that I'll have to make some kind of handler-function to which I pass a state-variable. This works for a single value (I can store the whole link_ids array just fine, but then I don't know which of them is the right value for this link), but how would I do this for arbitrary-length lists?</p>
  
  <p>Here is an example <a href="http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery" rel="nofollow noreferrer">from JQuery docs</a> which I'm trying to copy:</p>
  
  <pre><code> // get some data
   var foobar = ...;
  
   // specify handler, it needs data as a paramter
   function handler(data) {
     //...
   }
  
   // add click handler and pass foobar!
   $('a').click(function(){
     handler(foobar);
   });
  
   // if you need the context of the original handler, use apply:
   $('a').click(function(){
     handler.apply(this, [foobar]);
   });
  </code></pre>
  
  <p>And I quess the last example here, "if you need the context of the original handler..." would probably be what I want but I don't know exactly how to get there. I tried to store the current link_id value into <strong>this</strong>, use it from <strong>this</strong> in the applied function (using apply()) but I didn't succeed. The necessary values were still undefined according to FireFox. I'm using JQuery 1.3.2.</p>
  
  <p>So what's the right solution for this relatively basic problem?</p>