JQuery：对新添加的表行使用绑定

Question

I have a HTML table with one of the columns being a textbox column.

I have set up a bind on the textbox when ever the textbox value is changed through the UI an attribute is added/updated as follows:

$('#container').find('.tableClass tbody').find('input[type=text]').bind('input', function () {
   $(this).attr('data-val', this.value);                
            });

This works fine for rows loaded on form load. But when I add new a row to the table it does not seem to work. I tried using something like below to utilize event delegation but this does not work.

$('#container').find('.tableClass tbody').on('bind', 'input[type=text] input', function () {
    $(this).attr('data-val', this.value);                
        });

Any ideas for how to get this to work for newly added rows?

Answer 1

You're calling .on() incorrectly. The first argument should be the event name (just like the first argument to .bind() ), the second argument should be the selector. You used bind where the event belongs, and then you put the event name ( input ) into the selector. It should be:

$('#container').find('.tableClass tbody').on('input', 'input[type=text]', function () {
    $(this).attr('data-val', this.value);                
});