使用jQuery动态添加行

Question

我有一个包含选择字段id =“ projects”的表单，该表单在更改后显示了一个隐藏的选择字段'task'，该字段通过查询dB动态填充所选项目的任务。 然后，用户可以输入小时数，这些小时数将根据选择的proj_id，task_id组合进行更新。 以下代码显示了更改“项目”时的“任务”选择。

$('.tasks').hide();
$('#projects').change(function(){
    $('.tasks').show();
    $('.tasks').append("<option>1</option><option>New Task</option>");
});

然后，我添加了单击复制表格的按钮的功能，每一行包含1.select'project'2.隐藏select'task'在项目中显示3.选择隐藏的文本框（当选择了New Task选项时激活）4.小时输入框整个星期。

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

所需的功能是，每个用户都可以添加行并选择不同的项目任务组合以记录他们的工作时间。

这里的问题是，当我更改第一行项目时，所有添加的行也将受到影响，所以我无法将它们分开。 我是动态更改网页内容的新手。 请帮帮我。

整件事的工作提琴-http: //jsfiddle.net/PuWMK/1/

Answer 1

你可以试试这个

$('.tasks').hide();
$('#dynform').on('change' , '#projects', function(){
    $(this).next('.tasks').show()
    .append("<option>1</option><option>New Task</option>")
});

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

$('.tasks').change(function(){
    $('#new').css('visibility','visible');
});

演示。