title: jQuery ajax request not firing on subsequent events
body: <p>I have a jQuery function that I'm having a minor problem with:</p>
  
  <pre><code>$(function() {
    $("a.CompletedCheckBox").click(function() {
      if($(this).hasClass("CheckedCompletedCheckBox")) {
        $(this).removeClass("CheckedCompletedCheckBox");
      } else {
        $(this).addClass("CheckedCompletedCheckBox");
      }
        $.get("/Tasks/Complete/" + this.id, "", function() {});
    });
  });
  </code></pre>
  
  <p>The first time I click the link, the event function works as expected.  However each subsequent time I click the link, the class toggles correctly, however the $.get request does not fire.</p>
  
  <p>Any idea why the request to the server only fires the first time?</p>
  
  <p><em>EDIT:</em>  Here is the markup that I am using:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;
        Header Text
      &lt;/th&gt;
      ... and so on ...
    &lt;/tr&gt;
    &lt;% foreach (var item in Model as Item[])
    {%&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;a href="#" 
           class='&lt;%= "CompletedCheckBox " + (item.Complete ? "CheckedCompletedCheckBox" : "") %&gt;' 
           id='&lt;%= item.ID %&gt;'&gt;&lt;/a&gt;
      &lt;/td&gt;
      ... and so on ...
    &lt;/tr&gt;
    &lt;% } %&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><em>EDIT 2:</em>  This works fine in FireFox, but not IE7.  I would like to support IE in my app, so I need to come up with why this isn't working for IE.  </p>
  
  <p>I'm loading jQuery from Google (<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" rel="nofollow noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js</a>), if it make any difference.</p>