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 테이블 셀은 텍스트 필드로 바뀝니다.

//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> 태그 업데이트 변경하거나 링크를 제공하는 것을 허용하지 않습니다 는 여기에 대한 jQuery 코드입니다!

질문 :이 이벤트를 어떻게 바인딩해야합니까?

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"/>'); 
});