Change value of Dynamically created td on external event

Question

I have following code.

html += '<tr id="product_row_scheduled_'+key+'">';
html += '<td class="title">'+image_path+' '+product_row.title+'</td>';
html += '<td class="text-center" id="sch_product_posted_'+key+'"> '+product_row.user_set_time+'</td>';
html += '<td class="text-center"><a href="#" id="schedule_'+key+'" onClick="schedule_product(\''+key+'\',\''+product_row.title+'\',\''+product_row.user_set_time+'\')"> Schedule</a></td>';
html += '<td class="text-center"><a href="#" onClick="cancel_schedule(\''+key+'\')"> Cancel</a></td>';
html += '</tr>';

this is created using json data. now the function schedule_product changes the value of sch_product_posted_'+key+' using datetimepicker.

I have tried to use

$('#product_row_scheduled_'+key).on('change', '.product_posted_'+key+'',function(){
   console.log($('.product_posted_'+key+'').html());
});

but its not working. Any help will be appriciated.

Answer 1

Use # for ids like,

$('#product_row_scheduled_'+key).on('change', '#sch_product_posted_'+key,function(){
                                  // ----------^ # in place of .
    console.log($(this).html());// use this here
});

Using class instead of id would be simple like,

$(document).on('change', '.sch_product_posted',function(){
    console.log($(this).html());
});

Add a class sch_product_posted to your column

Updated change will not work use DOMSubtreeModified like,

$(document).on('DOMSubtreeModified','.sch_product_posted', function(event){
    console.log('Html: '+$(this).html());
});

Working Demo