Copy contents of element

Hello! I’ve got a table where different rows are being created dynamically with input controls in each. For example:
Row 1 contains txtCustomer1Name, txtAmount1Deposit, txtAmount1Available
Row 2 contains txtCustomer2Name, txtAmount2Deposit, txtAmount2Available


Row N contains txtCustomerNName, txtAmountNDeposit, txtAmountNAvailable

What I would like to achieve is to copy the contents of Deposit to Available in real-time, i.e. as we type. And this should be done per row only.

My piece of code looks like this:

$("input[name$='Deposit']").change(function() {
    alert("Deposit changed");
    $(this).next().val($(this).val());
});

However, it is not being triggered. Is it because the elements are dynamically being generated?

Hi,

Yeah, absolutely right… with dynamically added elements you need to delegate the event handler to a parent element, that way all new elements will also trigger the event:

$("table#mytable").on("change",  "input[name$='Deposit']", function() {
    alert("Deposit changed");
    $(this).next().val($(this).val());
});