Question

I’m trying to create more dynamic product and quantity picking method. So when you pick something, it will create a new selection row.. and when you select that, then it will again create a new row, over and over.

Basically the same method can be found in FaceBook, the poll system.

I have tried many different variations, but it doesn’t work like desired. First codes created one row at start, but stopped working after that. Current code creates new rows, but only when the first one is changed.. It doesn’t calculate the tr:last dynamically and Im all out of ideas.

This is what I have so far:

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]}

My last resort probably is that, I will use classes that set the correct last row. But that means, when the form is posted, PHP-side must also do that. This is not the solution I would like to use.

Answer 1

Use .live() or if you have the more current version of jQuery, use .on (I’ll post an example with .live() as it works with both)

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!