Running a .change() from within dynamically created rows

Question

I have two scripts running on my page and my data is held within a table.

1) on button click - function addRownew - this adds a new row the the table containing select and input boxes.

2) The select box has a script that when changed will pass the value into a input box (and output to log)

Both scripts work ok as intended when kept apart, but when I use the .change function from within the dynamically created row, nothing happens - not even a log.

My script for the function addRownew

function addRownew(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            newcell.childNodes[0].value = rowCount;
        }
    }

Script for the change:

 $(document).ready(function()
{
 $(".productcode").change(function () {

 console.log ('log onchange')
 var result= $(this).val();
 alert(result);

 $('#unit_cost').val($('.productcode').val());
});

});

And the php table:

<TABLE id="dataTable" border="0">

 <TR style="display:none;">
 <TD width="5%" align="left"><INPUT type="checkbox" name="chk2"/></TD>
 <TD width="150" align="left"><INPUT name="furn_id[]" type="hidden" value="0"/><INPUT name="furn_item[]" type="text" /></TD>
 <TD width="150" align="left">&nbsp;<select name="furn_room[]" multiple="MULTIPLE" >
 <?php
 $query=mysql_query("SELECT room FROM dbRooms ORDER BY room"); 
 while($entry=mysql_fetch_array($query)) {
 echo '<option value="' . $entry['room'] . '">' . $entry['room'] . '</option>';  
} ?>
 </select></TD>
 <TD width="250" align="left">&nbsp;<select name="furn_room[]" id="productcode" class="productcode" >
 <option value="" ></option>
 <?php $query=mysql_query("SELECT * FROM dbProducts ORDER BY product_name"); 
 while($entry=mysql_fetch_array($query)) {
echo '<option value="' . $entry['product_code'] . ' - ' . $entry['product_name'] . ',' . $entry['product_unit'] . '">' . $entry['product_code'] . ' - ' . $entry['product_name'] . '</option>';  
} ?>
 </select></TD>
 <TD width="50" align="left">&nbsp;<INPUT name="furn_qty[]2" type="text" value="" size="2"/>      <select name="furn_room[]" >
 <?php $query=mysql_query("SELECT * FROM dbSizeOptions order by id"); 
 while($entry=mysql_fetch_array($query)) {
 echo '<option value="' . $entry['size'] . '">' . $entry['size'] . '</option>';  } ?>
 </select></TD>
 <TD align="left">&nbsp;<INPUT name="furn_qty[]" type="text" value="" size="2"/></TD>
 <TD width="50" align="left" valign="middle">&nbsp;<INPUT name="furn_cost[]" type="text" value="" size="5"/></TD>
 <TD width="50" align="left" valign="middle">&pound;<INPUT name="unit_cost[]" id="unit_cost" class="unit_cost" type="text" value="" size="5"/></TD>
 <TD width="50" align="left" valign="middle">&pound;<INPUT name="furn_cost[]" type="text" value="" size="5"/></TD>
 </TR>
 </TABLE>

It's a common problem anyone hits after a while with working with jQ. Have a look at the answers for this question: http://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-ajax-generated-content — LS11, Sep 26 '14 at 08:30
By the way, you should not use `mysql_` functions : "This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the [MySQLi](http://php.net/manual/fr/book.mysqli.php) or [PDO_MySQL](http://php.net/manual/fr/ref.pdo-mysql.php) extension should be used." — Brewal, Sep 26 '14 at 08:37

score 1 · Accepted Answer · answered Sep 26 '14 at 08:31

1

Use event delegation :

$('#dataTable').on('change', '.productcode', function(){
    // code
});

answered Sep 26 '14 at 08:31

Brewal

8,067
2
24
37

This works and my console log now shows the var result, but the input box does not change - $('#unit_cost').val($('.productcode').val()); – tomantford Sep 26 '14 at 08:48
1

Replace with this : `$('#unit_cost').val($(this).val());` or just `$('#unit_cost').val(result);` since you already made it a variable – Brewal Sep 26 '14 at 08:58
Works, but changes all unit_costs. How do I get it to only change the unit_cost of the row the select is on. I guess I will have to pass an [] somewhere? – tomantford Sep 26 '14 at 09:02
1

Ok... Ids must be unique. So remove `id="unit_cost"` from you html an use this selector instead : `$(this).closest('tr').find('.unit_cost')` . Also remove the id of productcode – Brewal Sep 26 '14 at 09:17
Perfect. My final script (if it helps anyone else): $('#dataTable').on('change', '.productcode', function(){ s = $(this).val(); var fields = s.split(/,/); var name = fields[0]; var price = fields[1]; $(this).closest('tr').find('.unit_cost').val(price); }); – tomantford Sep 26 '14 at 09:33

Running a .change() from within dynamically created rows

1 Answers1