jQuery event on (dynamic) table row change

Question

So I've been trying to monitor when my dynamic table changes in rows and tbody's.. here's an example of the structure:

<table id="assignedTable"> 
    <tbody class="assigned"> 
        <tr id="#uniquenumberhere">
        </tr> 
        <tr>
        </tr> 
    </tbody> 
</table>

This is what I got so far.. but it doesn't work:

$(function(){
            $('#assignedTable').on('change', '.assigned', function(){
                $('#assignableTbody').append("dynamic table changed");
            });
        })

Hope anyone can help, Thanks in advance!

You might find this answer useful: http://stackoverflow.com/questions/3233991/jquery-watch-div/3234646#3234646 — Laurence, Oct 19 '12 at 12:08

score 4 · Accepted Answer · answered Oct 19 '12 at 12:06

4

You can't use a change event on a table. Check out the jquery documentation

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes,

Jquery Documentation on the change event

Perhaps you can try polling the table and count the table rows and see if that value changes, but this isn't good for performance.

answered Oct 19 '12 at 12:06

Stijn_d

1,078
9
20

Alright.. missed that much, thanks for your answer! I'll think of a different solution – Davey Oct 19 '12 at 12:25

score 1 · Answer 2 · answered Oct 19 '12 at 12:17

1

Rewrite your table to divs or other tags, create css rules for them to design them as you like and you will be able to define a change event handler for your "root" div.

answered Oct 19 '12 at 12:17

Lajos Arpad

64,414
37
100
175

score 0 · Answer 3 · answered Jan 19 '15 at 19:20

This is an old thread, but I had never needed to do this before but it is fairly simple by creating a function that you call when a row gets selected.

JSFiddle

var checkButton = function() {
    if ($('tr.selected').length > 0) {
        $('#analyze').prop('disabled', false);
    } else {
        $('#analyze').prop('disabled', true);
    }
}
$('#table tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
    checkButton();
});

jQuery event on (dynamic) table row change

3 Answers3