0

I have a table whose rows are generated by an ajax query response like:

var inp = '<input id="new_po_qty" style="text-align:center" type="text" value="1">';
$('<tr id="new_po_item_row">').html('<td style="text-align:center">' + sku_id + '</td><td style="text-align:center">' + inp  + '</td><td id="new_po_cp" style="text-align:center">' + cost_price  + '</td><td id="new_po_total_cp" style="text-align:center">' + cost_price  + '</td>').appendTo('#new_po_body');

Now i wrote a jquery function to catch changes on the inp variable in table row. But the jquery function is not catching the changes i do in the input box.

Jquery function:

$('#new_po_qty').on('change paste', function(){
    alert('changes made.');
    $.niftyNoty({
        type:"primary",icon:"",title:"Start Adding Products.",container:"floating",timer:5000
    });
});

What i am i doing wrong with the function?

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Manish Gupta
  • 4,438
  • 18
  • 57
  • 104

1 Answers1

2

Use event delegation:

$(document).on('change paste', '#new_po_qty', function(){
    alert('changes made.');
    $.niftyNoty({
        type:"primary",icon:"",title:"Start Adding Products.",container:"floating",timer:5000
    });
});

See jQuery .on() docs.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177