title: Modifying the DOM based on an AJAX result with jQuery
body: <p>I'm unsure of the best practice for modifying the DOM based on an ajax response. I'll try to let the code do the talking because it's hard to explain.</p>
  
  <pre><code>// page has multiple checkboxes
  $("input[type='checkbox']").live('click', function {
    var cb = $(this); // for the sake of discussion i need this variable to be in scope
    $("form").ajaxSubmit({ dataType: "script" });
  }
  </code></pre>
  
  <p>The server sends a response back, and the js gets eval'd and that means "cb" is out of scope.</p>
  
  <p>What I've done so far is create a couple of helper functions:</p>
  
  <pre><code>var target = undefined;
  
  function setTarget(val) {
    target = val;
  }
  
  function getTarget() {
    return target;
  }
  </code></pre>
  
  <p>And that turns the first snippet of code into this:</p>
  
  <pre><code>// page has multiple checkboxes
  $("input[type='checkbox']").live('click', function {
    setTarget($(this));
    $("form").ajaxSubmit({ dataType: "script" });
  }
  </code></pre>
  
  <p>Then on the server's response I call getTarget where I need to. This seems hackish... Any suggestions?</p>