Question

I have a form and I’m using the jQuery Table AddRow plugin to dynamically add rows to a table, the problem is I’m trying to when you select a Menu Item that the menu item goes into the text box to the left of it. It works on the first row but I can’t figure out how to get it to work with rows that are added via the plugin.

You can see my code in action here: http://jsfiddle.net/VXNzd/

Here is the jQuery code:

// This moves the select box text to the input box
$('#mnu_names').change(function() {
    var mnuProduct = $("#mnu_names").find(':selected').text();
    var mnuCleanProduct = mnuProduct.split(' - ');
    $('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({

It may be easier to see what I’m talking about by visiting the jsfiddle link up top. When it loads use the select box to and select something, It will put that info over into the text box without the price info. Add a new row and try it again. Won’t work, can’t figure out how to make it work.

Answer 1

The problem was as said by tomhallam your ID’s are not unique. Also $.change() does not work on blocks added after you ran that. You should instead use $.on('change',...).

I updated your code and posted it on http://jsfiddle.net/PDPbn/5/.

The modified jquery-code goes as follows:

$(document).on('change','.mnu_names',function() {
    var mnuProduct = $(this).find(':selected').text();
    var mnuCleanProduct = mnuProduct.split(' - ');
    $(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});