javascript - Keep track of changes in html table/form

Question

What I'm trying to achieve is to keep track of any changes (e. g. user input, field added, ...) within a <table>-element. In my specific scenario users can edit fields, add rows, add fields, remove fields and rows, select something in <select>-elements, etc.

Of course I could just attach my "change"-listener to all of those actions, but I think there must be a better way.

I tried attaching a $('#myTable tbody').change()-listener to it, but that doesn't fire...

Maybe some of you know of a way to keep track of table changes without having to subscribe to every possible user action manually?

Answer 1

Edit: As I understand it, jQuery 1.4+ should actually support the described behavior. I'll leave the rest of my post for reference.

You can add the event to every changeable element, because that is where they are fired. However, you won't have to do it manually:

$('#myTable input, #myTable select, ...).change(...)

If, as you said, there are elements added later on, you might want to look into the .live method that allows you to bind event listeners to elements that are to be created later on.

Answer 2

You can use Jquery liveQuery Plugin

Below is the example for mouse over and mouse out. you can do it for all the events likewise

 $('table') 
    .livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this) 
            .hover(function() { 
                $(this).addClass('hover'); 
            }, function() { 
                $(this).removeClass('hover'); 
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    }); 

Answer 3

To answer my own question:

I decided on doing it kinda like @mdsl suggested:

I now listen for changes like this:

$('#myTable tbody').on('focusout', 'input, select, checkbox', myListener);