jQuery: how to update value in place?
<p>I want to edit data in a table using jQuery. 
The HTML markup is:</p>

<pre><code>&lt;tr id="unique_rid1"&gt;
    &lt;td&gt;15/01/2012&lt;/td&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="edit_work_done" id="unique_rid1"&gt;Edit&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>When user clicks on "Edit", this link becomes "Update" and the table cell contaning the number 4 turns into a text field.
Here is the jQuery code for that:</p>

<pre><code>//change the work done to be a form when "edit" is clicked
var toUpdate;
$(".edit_work_done").click(function(){
    $(this).removeClass('edit_work_done').addClass('update_work_done').html("Update!");
    toUpdate = $(this).parent().parent().children('td').eq(1);
    var Hours = toUpdate.html();
    toUpdate.html('&lt;input type="number" value="'+ Hours +'" class="new_hour span1"/&gt;');
});
//change the work done to be static value when "Update!" is clicked
$(".update_work_done").live("click", function(){
    $(this).removeClass('update_work_done').addClass('edit_work_done').html("Edit");
    var newHours = $(this).parent().parent().find("input.new_hour").val();
    toUpdate = $(this).parent().parent().children('td').eq(1);
    toUpdate.html(newHours);
});
</code></pre>

<p>However, "live" catches the class change immediately and does not allow the <code>&lt;input&gt;</code> tag to come up or the link to change to Update!</p>

<p>Question: How should I bind this event? (as a simple "click" event does not capture the dynamically updated class change)</p>
