jquery functions after append row to table

Question

I need some help so I hope you could help me. I have a table which rows are added this way after click on a button.

var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";

$('#pl_table').append(row);

I also have jquery function that adds a class to a row when checkbox is selected. So this class has a .css definition for background color.

$('input:checkbox').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}

The problem is on('change') event is not called for rows added. And it is called for rows that already exist when loading the page.

why does this happend? What is wrong on my code? Thank you for your help.

live method didn't work. It's not accepted for the object.

jonal
– jonal

2015-03-10 17:54:42 +00:00
Commented Mar 10, 2015 at 17:54 — jonal
– jonal, Commented Mar 10, 2015 at 17:54

Vim · Accepted Answer · 2015-03-10 17:37:26Z

1

I have faced the same situation and the steps I followed to solve this are given below,

a. Put $('input:checkbox').on('change' inside a method as shown below,

function BindDynamicEvents()
{
   $('input:checkbox').off('change').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}
}

b. Call this method after the $('#pl_table').append(row) as shown below,

$('#pl_table').append(row);
BindDynamicEvents();

This will solve the problem.

Note: please include .off('change') as shown in code to avoid the event being fired multiple times.

answered Mar 10, 2015 at 17:37

Vim

5596 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jonal Over a year ago

You where right. Thanks for your help. Next answer is also very similar. ;)

kizisoft · Accepted Answer · 2015-03-10 18:13:21Z

1

If you want to keep the current syntax try this:

    $('#pl_table').on('change', 'input:checkbox', function () {
        if (this.checked) {
            $(this).closest('tr').addClass('selected');
        }
        else {
            $(this).closest('tr').removeClass('selected');
        };

This way you don't add event on each input, you only add it on the table and fire it when input is changed. I prefer this for dynamical generated elements.

edited Mar 10, 2015 at 18:13

answered Mar 10, 2015 at 18:04

kizisoft

3862 silver badges12 bronze badges

Comments

hamed · Accepted Answer · 2015-03-10 17:34:37Z

0

Try this:

var row = "<tr><td><input class='check_box' type='checkbox' onchange="change(this);"></input>some text<td></tr>";

$('#pl_table').append(row);


function change(element)
{
    if(element.checked) {
        element.closest('tr').addClass('selected');
     }
  else{
    element.closest('tr').removeClass('selected');
   }
}

answered Mar 10, 2015 at 17:34

hamed

8,04517 gold badges66 silver badges119 bronze badges

2 Comments

hamed Over a year ago

@jonal Did you try answers?

jonal Over a year ago

It's better to use this: $(document).on('change','#element',function(){});

jonal · Accepted Answer · 2016-03-21 20:43:34Z

0

I'ts much better to use:

$(document).on('change','#elemnt',function(){
     //do something here
});

So there's no need to call BindDynamicEvents(); every time a new row is added.

answered Mar 21, 2016 at 20:43

jonal

751 silver badge10 bronze badges

Comments

Milo · Accepted Answer · 2019-08-22 15:39:43Z

0

As of jQuery 1.4, .after() supports passing a function that returns the elements to insert. Refer this link.

edited Aug 22, 2019 at 15:39

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Aug 22, 2019 at 15:31

EnflowSoft India

1

Collectives™ on Stack Overflow

jquery functions after append row to table

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related