最後の現在の選択が変更されたときに新しい選択行を作成する方法は？

Question

私はより動的な製品と数量ピッキング方法を作成しようとしています。だから、何かを選ぶと、それは新しい選択行を作成し、それを選択すると、何度も何度も新しい行が作成されます。

基本的に同じ方法が投票システムのFaceBookにあります。

私は多くのバリエーションを試しましたが、望みどおりに動作しません。最初のコードは開始時に1行作成されましたが、それ以降は動作を停止しました。現在のコードは新しい行を作成しますが、最初の行が変更されたときにのみ作成されます。

これは私がこれまで持っているものです：

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!