使用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');
});

演示。