0

I have a working multiplication of textbox, however, when I added a new textbox, the function will not performed. Only the first textboxes is being executed of the js function that I made. Sorry for asking this but I am pretty new to jsquery/javascript.

here's my working script: JS FIDDLE

What it does is, I have a table and 2 TR on it. it multiply the cost(3rd td) and the quantity(fourth td) and send the results to the line total (fifth td). Then I have a button, that will add another set of tr to the existing table, however, the multiplication wont work on the newly added tr.

Can you help me here?

TIA,

Nimitz

Nimitz E.
  • 95
  • 1
  • 13
  • possible duplicate of http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre – Dan O Oct 02 '14 at 13:59

1 Answers1

1

Just add these two lines as two last lines of your .click(...) handler:

$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);

Here is updated JSFiddle

The reason for that is - you have to re-register event listeners for the line newly created. You can use same selectors, but then you have to "off" previous event listeners.

Update

Another approach, is you can bind events only on newly created row: Here is another JSFiddle for that

You have to put contents of newly created row into some variable:

$('#myinvoice tr:last').after($newRow = $('<tr><td>...'));

And then add events for the selectors inside this $newRow only:

$(".qty :input",$newRow).keyup(byPrice);
$(".price :input",$newRow).keyup(byQty);

I'd use second

Jevgeni
  • 2,556
  • 1
  • 15
  • 18