jQuery自动完成UI窗口小部件-在动态创建的表行元素上执行jQuery select事件

Question

I have a working jQuery autocomplete being performed on the text input of a table data element, txtRow1. The text data is remote, from a mysql database, and is returned by JSON as 'value' for the text input. The returned data includes another piece of text, which, via a select event within the autocomplete, is populated to the adjacent table data element tickerRow1.

With help from the SO community, the autocomplete is now live and working on all text input elements of a dynamically created table (so txtRow1 to txtRowN). There is javascript code to create and name the table elements txtRoxN + 1 and tickerRowN + 1.

However, I have a problem with the select event for the id of tickerRowN. Because it changes every time I add a row, I don't know how to call the select event for the specific id of the table data in question.

I have done a lot of searching around but as I am new to this, the only functions I have been able to find manipulate the element data when you know the id already. This id is dynamically created and so I don't know how to build the syntax.

Thankyou for your time.

UPDATE: with huge thanks to JK, the following example works. I now know about jsFiddle and will try to use this for all further questions. The following code works for my dynamic example, but I don't know why. Sigh.

jsFiddle working example

Answer 1

function getRowId(acInput){
     //set prefix, get row number
     var rowPrefix = 'txtRow';
     var rowNum = acInput.attr("id").substring((rowPrefix.length));
     return rowNum;
}

$("#txtRow1").autocomplete({
    source: states,
    minLength: 2,
    select: function(event, ui) {
       var tickerRow = "#tickerRow" + getRowId($(this));
        //set ticker input
        $(tickerRow).val(ui.item.label);
    }
});

http://jsfiddle.net/jensbits/BjqNz/