如何使用onchange事件获取附加表行中的值？

Question

I have an ajax function that gets the values from the database and then appends those data to a table. Now, there are instances that there will be 2 or more records from the database that are being retrieved, so 2 or more table rows are also appended.My problem is, how would I able to get the values of a specific row using onchange event since I have included a select option values in the table row being appended. I know its a bit confusing but can anybody help me with this? Thanks a lot. Here are my codes.

$.post("{{ url('create_po') }}", { 'prod_IDs': valArray }, function(data){
    var obj = JSON.parse(data);
    for(var i = 0; i < obj.prodval.length; i++){
        txt += "<tr class='info '><td><input type='number' class='form-control' style='width:100px;' value='0'/>"+
             "</td><td>"+obj.prodval[i].unit+
             "</td><td>"+obj.prodval[i].pharmaceutical+
             "</td><td>"+obj.prodval[i].packaging+
             "</td><td><input type='text' class='form-control' style='width:100px;' value='"+obj.prodval[i].price+"' disabled=disabled />"+
             "</td><td><input type='text' class='form-control' style='width:100px;' value='0' disabled=disabled />"+
             "</td></tr>";
    }
    $("#tbl-po-list").append(txt);
});

My table

<table id="tbl-po-list">
 <tbody id="po-create"></tbody>
</table>

Output:

My revised table

How can I get the values in a row using onchange event of the quantity represented as QTY in the image above? Please please help. Thanks a lot.

Answer 1

Please use jQuery's Event delegation.

$( '#tbl-po-list' ).on( 'change' , 'input[type="number"]' ,function(){
    alert( 'Event fired' );
});

Did not mock the ajax request rather just appending a new row to the table on the click of a button in the below fiddle: https://jsfiddle.net/ehcwhd7f/

Answer 2

业余答案提醒：

table.rows[0].cells[0].children[0].value