jquery - 当最后一个当前选择更改时，如何创建新的选择行？

Question

我正在尝试创建更动态的产品和数量挑选方法。因此，当您选择某些内容时，它将创建一个新的选择行..当您选择该内容时，它将再次创建一个新行，一遍又一遍。

在 Facebook 的投票系统中也可以找到基本上相同的方法。

我尝试了许多不同的变体，但它并不像预期的那样工作。第一个代码在开始时创建了一行，但之后停止工作。当前代码创建新行，但仅当第一个行更改时。它不会动态计算 tr:last，我完全没有想法。

这是我到目前为止所拥有的:

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!