jQuery：値を更新するには？

Question

jQueryを使用してテーブル内のデータを編集したいとします。 HTMLマークアップは次のとおりです。ユーザーは、「編集」をクリックすると

は

<tr id="unique_rid1"> 
    <td>15/01/2012</td> 
    <td>4</td> 
    <td><a href="#" class="edit_work_done" id="unique_rid1">Edit</a></td> 
</tr> 

、このリンクは「更新」となって数4をcontaning表のセルには、テキストフィールドになります。ここ は、そのためのjQueryのコードです：

//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('<input type="number" value="'+ Hours +'" class="new_hour span1"/>'); 
}); 
//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); 
}); 

しかし、「ライブは」すぐにクラスの変更をキャッチし、<input>タグを更新するために変更することが出てくるか、リンクすることはできません！

質問：このイベントをどのようにバインドする必要がありますか？あなたが生きて与える必要があり

Answer 1

（「クリック」シンプルなイベントが動的に更新されたクラスの変更を捕捉しないよう）両方

var toUpdate; 
$(".edit_work_done").live("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('<input type="number" value="'+ Hours +'" class="new_hour span1"/>'); 
});