如何在上次当前选择更改时创建新的选择行？

Question

我正在尝试创建更多动态的产品和数量拣选方法。所以当你选择一些东西的时候，它会创建一个新的选择行......当你选择它时，它会再次创建一个新的行，一遍又一遍。

基本上可以在调查系统FaceBook中找到同样的方法。

我已经尝试了许多不同的变化，但它不像想要的那样工作。第一个代码在开始时创建一行，但在此之后停止工作。当前的代码会创建新的行，但只有当第一行被更改时才会生成新的行。它不会计算tr：最后动态，并且Im完全没有想法。

这是我到目前为止有：

create_new_row = function() { 
    var table = $('#products_table'), 
     last_row = $(table).find('tr:last') 
     last_row_select = $(last_row).find('select'), 
     new_row = $(last_row).clone(); 

    // This part is brutal, could be optimized, but not a priority 
    $(new_row).find('option:selected').removeAttr('selected'); 
    $(new_row).find('input[type="text"]').val(1); 
    $(new_row).appendTo($(table)); 
}; 

$('#products_table tr:last select').change(function() { 
    create_new_row(); 
}); 

^{[View output]}

我最后的手段可能就是，我将使用该设置正确的最后一行类。但是这意味着，当表单发布时，PHP端也必须这样做。这不是我想要使用的解决方案。

Answer 1

使用.live()或者如果你有jQuery的的更新版本，使用.on（我会后一个例子与.live()因为它与这两个作品）

create_new_row = function() { 
    var table = $('#products_table'), 
     last_row = $(table).find('tr:last') 
     last_row_select = $(last_row).find('select'), 
     new_row = $(last_row).clone(); 

    // This part is brutal, could be optimized, but not a priority 
    $(new_row).find('option:selected').removeAttr('selected'); 
    $(new_row).find('input[type="text"]').val(1); 
    $(new_row).appendTo($(table)); 
}; 

$('#products_table tr:last select').live('change', function() { 
    create_new_row(); 
}); 

Working Example here!