$(document).on('focus' Or $(document).bind('input', Not Trigger On Dynamically Added Row?

I used $(document).on('focus' or $(document).bind('input','input:text' so my method for automatically change duplicate input values from table1 to table2 via(keypress), but my code

Solution 1:

.bind() doesn't take a selector argument, only .on() does. If you're binding to dynamically-added elements, you need to use .on().

$(document).on('input', 'input:text', function ...);

Corrected fiddle

The other problem is that you're using $("input:text").each(). That will only process the elements that existed when the page was loaded. You don't need that loop, just bind your event handlers normally. You don't need the variables elem and oldValue outside handlers; within the handler, $(this) is the element that the event was triggered on, and you can get oldValue from .data().

$(document).on('focus', 'input:text', function () {
    var elem = $(this);
    elem.data('oldVal', elem.val());
    elem.data('oldLen', elem.data('oldVal').length);
});

$(document).on('input', 'input:text', function (event) {
    var elem = $(this);
    var oldValue = elem.data('oldVal') || '';
    elem.data('oldVal', elem.val());
    if (elem.val().length - oldValue.length > 1) {
        alert('Most certainly pasted');
    }
    elem.data('oldLen', elem.data('oldVal').length);
    foo(oldValue, elem.val());
});

Solution 2:

I have refactored your code. **Note : ** You should not have a static id when adding elements dynamically. Ids are supposed to be unique and as it is, your inputs will all have the same id input_0. Instead, since you have only one input per row, get the index of the row to create ids dynamically (input0, input1,..., inputN). See the code below, it's commented.

Another thing, your table2 was not updated because you are adding rows dynamically and the $(selector).each() is only running once. if you put it inside a function to be invoked every time a row is added everything will work fine.

//----------adding a row
$(document).on("click", '.tdAdd', function () {
    var table = $(this).parents("#table1");

    // get the rowvar currentRow = $(this).closest("tr");

    // get the current value of the input// in order to duplicate itvar currentVal = currentRow.children().find("input[type='text']").val();

    // one way to create a cellvar buttonCell = '<td><input type="button" value="Add Row" class="tdAdd"/></td>';

    // but I'd rather do it like this// because I can assign any value as an attribute - dynamicvar inputCell = $("<td>").append($('<input type="text"/>').attr({
           id : "input" + (currentRow.index() + 1),
           value : currentVal,
           class : "ttt"
        }));

    table.append(
        $("<tr>").append(buttonCell, inputCell)
    );

    // invoking this function in order to update $(selector).each()updateEachFn();
});

and the wrapper function

// wrap $(selector).each() inside a function to be invoked // every time a row is added to keep everything up to datefunctionupdateEachFn() {

  $("input:text").each(function () {

    var elem = $(this),
        oldValue;

    $('input:text').trigger('focus');

    // do not use document, because it will unnecessarily go through// every single input -- bad for performance// also you are already on an input:text ie each() above
    elem.bind('focus', function () {
        elem.data('oldVal', elem.val());
        elem.data('oldLen', elem.data('oldVal').length);
    });
    elem.bind('input', function (event) {

        oldValue = elem.data('oldVal');
        elem.data('oldVal', elem.val());
        if (elem.val().length - elem.data('oldLen') > 1) {
            alert('Most certainly pasted');
        }
        elem.data('oldLen', elem.data('oldVal').length);
       foo(oldValue,elem.val());
    });
  });
}
$("input").blur(); 

// invoke it once for input0updateEachFn();

here's a jsfiddle for you to play with