[jQuery] Noob

[rhythmicde...@gmail.com]

Hello,
 I have a table that has some form inputs in a single row. One of the
text inputs is an autocomplete that gets its data from a PHP variable.
I have all that working.

I have a button that clones this row and all its inputs incrementing
the IDs and then appending it to the table. That works fine.

The problem I am having is that I dont know how to attach the
autocomplete to the input in the new row.

I have pasted my code below. If you read it you can probably tell that
I ran into the same issue with the delete row button, but I got around
by using straight Javascript. But if I can solve how to attach to a
new element I can fix both problems.


Thanks in advance.
Steve



$(document).ready(function()
{
        $('#add_recipe_row').click(function()
        {
                add_row('recipe_list', 'row_');
        });

        $('#add_ingredient_row').click(function()
        {
                add_row('ingredient_list', 'row_');
        }
        );

}); // ends document.ready


function add_row(tableID, rowIDprefix)
{

        // Clone the last row of the table.
        var clonedRow = $('#'+ tableID + ' tr:last').clone();

        // Generate an incremented index for the new row. -1 because there is
a table header row
        var newIndex = (document.getElementById(tableID).rows.length -1);

        // Set the ID of the row with the new index
        clonedRow[0].id = rowIDprefix + newIndex;

        //console.log('ingredient_' + newIndex);
        // Loop through all of the inputs and select in the cloned row
        // Find the name and ID of the input/select element and find the
number in it abd replace it with the
        // new index.
        $.each($('input, select', clonedRow), function(i, val)
        {
                //console.log(val);

                //console.log('Index -1: ' + (newIndex -1) + '. Index: ' +
newIndex);
                val.name = val.name.replace((newIndex - 1), newIndex);
                val.id = val.id.replace((newIndex - 1), newIndex);
                val.value = '';

        });

        //alert($('td.delete_col', clonedRow).parent().get(0).id);

        $('td.delete_col', clonedRow).html('<span onclick="delete_row(\'' +
rowIDprefix + newIndex + '\');">delete</span>');

        // put the row into the table
        $('#' + tableID).append(clonedRow);
}

function delete_row(rowID)
{
        //alert(obj.parent().parent().get(0).id);
        //var rowID = obj.parent().parent().get(0).id;

        if(rowID == 'row_0')
        {
                alert('You cannot delete this row');
        }
        else
        {
                $("#"+rowID).remove();
        }
}