jQuery:如何更新价值?

时间:2012-01-25 17:12:49

标签: jquery

我想使用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的表格单元格变为文本字段。 这是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);
});

但是,“live”会立即捕获课程更改,并且不允许<input>标记出现或链接更改为更新!

问题:我该如何绑定此事件? (作为一个简单的“点击”事件不会捕获动态更新的类更改)

1 个答案:

答案 0 :(得分: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"/>');
});