Hey, is there any way to get this:

$(document).on('keyup', "*[data-field='quantity'],*[data-field='price']", function(e){

to run whenever there's a change the whole table?

At the moment it only changes on the keyup in the [data-field='quantity'] and [data-field='price']. But thing is I have a button to delete a row, and once ones deleted it doesn't update the total. As an example of what I mean, go the the link below and add two rows and watch it add up the totals, then delete one. The total doesn't update until there's another change in the [data-field='quantity'] and [data-field='price'] inputs.


I also have a button which will add prefilled data into this table, so I kind of need that line above to run whenever there's a change in the table.

I have tried all sorts (on change, on blur, on click etc...), this came close:

$("#mytable").bind("DOMSubtreeModified", function() {
    alert("Hurrey table changed");

As it would alert when there was a change, but I couldn't get it to work with the form in the jsfiddle.