HTML表单未传递从jQuery动态添加的输入

Question

I'll keep it short and simple, I've browsed and browsed around here and other sites but am unable to find a solution for my issue: I've got an HTML form that works fine. An update I'm doing allows the end user to add a new TR dynamically into a Table that will contain 4 input fields. Each input field has the name, id, and class set. (This was one of the solutions from another posting.) There's a span the user clicks which creates the new TR with the inputs. The functionality of this works perfectly, and the new TR gets created and the inputs are there and do what I need them to. However, when I submit the form, it doesn't recognize the dynamically created inputs.

I've debugged in both Chrome and FF, I can see all the other form elements being passed through, except for my dynamically created elements. The way I'm trying to reference the data on the receiving page is not the issue (Another solution for another user having the same issue,) since the data isn't being passed in the first place.

If I serialize the form and alert it before submitting it, it does not pick up on the dynamically created elements.

Below is my jQuery code, any help would be greatly appreciated, and thanks in advance!

var kit_rows = 0;
var btn_add_rows_i = 1;
var btn_add_rows_x = '';

$('#text_add_rows').click(function() {

kit_rows += 1;

btn_add_rows_x = '';
btn_add_rows_x += "<tr>";
    btn_add_rows_x += "<td class='main'> Model #: ";
    btn_add_rows_x += "<input type='text' name='kit_model" + btn_add_rows_i + "' id='kit_model" + btn_add_rows_i + "' class='kit_model'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Qty: ";
    btn_add_rows_x += "<input type='text' name='kit_qty" + btn_add_rows_i + "' id='kit_qty" + btn_add_rows_i + "' class='kit_info kit_qty'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Price: ";
    btn_add_rows_x += "<input type='text' name='kit_price" + btn_add_rows_i + "' id='kit_price" + btn_add_rows_i + "' class='kit_info kit_price' value='0.00'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Wholesale: ";
    btn_add_rows_x += "<input type='text' name='kit_wholesale" + btn_add_rows_i + "' id='kit_wholesale" + btn_add_rows_i + "' class='kit_info kit_wholesale' value='0.00'> &nbsp; </td>";
btn_add_rows_x += "</tr>";

$('#tr_last').before(btn_add_rows_x);

btn_add_rows_i++;

alert($('#cat').serialize());

});

My questions are:

Once I $('#tr_last').before(btn_add_rows_x); the content, shouldn't the HTML form pick up on the content automatically?

Does jQuery's "before" function do the job or is there something different I should be using that will allow the form to pick up on the new content?

Answer 1

have a look on this jsfiddle. whether it satisfies your requirement

enter code here http://jsfiddle.net/gurunathana/8eeqwhyf/

Regret if i mistakenly understand your query.

Thanks,