Changing class on object with jQuery does not allow me an onClick event of new class
<p>I am allowing users to upvote an item.  When they click the up arrow, I have jQuery change the class of the arrow so that it turns green.  Now, if the user clicks that same arrow again, I want to create an event to change that arrow back to its original class, so they are undoing their vote (like stackoverflow voting: click once to upvote, click again to undo). Anyway here is my code.</p>

<p>These are the arrow classes in php generated on page load.</p>

<pre><code>  &lt;a href="javascript:void(0)" id = "' . $row['item_id'] . 'up"

        '; if ($row['upVote'] &gt; 0) { echo '
            class = "used_upArrow"
           ';} else {echo '
               class = "new_upArrow"
               ';} echo '
                rowid="' . $row['item_id'] . '"&gt;
     &lt;/a&gt;
</code></pre>

<p>Here is my jQuery changing the class on an upvote (among other things).  This all works perfectly.</p>

<pre><code>//upArrow
 $('.new_upArrow').click(function(){
   var row = $(this).attr('rowid');
    $.ajax({
    type: "GET",
    url: "upVote.php?id="+row,
    cache: false,
    async: false,
    success: function() {
        $('.'+row).html(parseInt($('.'+row).html()) + 1);
        document.getElementById(row+'up').className = "used_upArrow";
        },
    error: function(result){
        alert('Voting error, please try again.');
        }
     });
});
</code></pre>

<p>Here is where the undoing should occur. So, <code>new_upArrow</code> should now be <code>used_upArrow</code>, and <strong>this</strong> script should fire on click.  </p>

<pre><code> $('.used_upArrow').click(function(){
   var row = $(this).attr('rowid');
    $.ajax({
    type: "GET",
    url: "downVote.php?id="+row,
    cache: false,
    async: false,
    success: function(result) {
        $('.'+row).html(parseInt($('.'+row).html()) - 1);
        document.getElementById(row+'up').className = "new_upArrow";
        },
    error: function(result){
        alert('Voting error, please try again.');
        }
    });
});
</code></pre>

<p>Checking firebug, the class is in fact changing <strong>FROM</strong> <code>new_upArrow</code> <strong>TO</strong> <code>used_upArrow</code>, but it continues to <strong>UPVOTE</strong> when clicked as if the class has no changed. Any ideas what is going on? Thank you in advance.</p>
