Can jQuery capture the dynamic dom events and perform actions

Question

I just wanted to know if something like this is possible.

jQuery should fire some action on certain custom event.

Like whenever a new row is added to DOM dynamically to table then I have certain action like change the background color to example red.

That should work across the whole site.

Somethings like Event listeners in Doctrine2 or Signals in Django

EDIT:

Basically I want some thing like where I can create a custom event:

$.AddnewEvent(newRowAdded);

Then I can customise that event with my own functions like:

$.newRowAdded(function(){   blah blah  });

Answer 1

As you stated --- custom event, which I believe you'll have to code your own custom trigger.

$('<tr><td>new row</td></tr>').appendTo('#my_table').animate({backgroundColor: '#f00'});

color animation requires jQuery Color plugin.

update

not sure what you mean by custom events which work across whole site?

since you have to manually append new element to a table everytime you are about to add a new row, just add the animation after appending. I don't think there's a build-in event listener which would do that for you automatically.

you can write a small function

$.fn.colorRow = function() {
    $(this).animate({backgroundColor: '#f00'}, function() {
        $(this).animate({backgroundColor: '#fff'});
    });
};

and append this function after new row is inserted.

$('<tr><td>new row</td></tr>').appendTo('#my_table').colorRow();

Answer 2

There are a lot of event listener in jQuery, I'll name a few

$(selector).click(function(){/*some function*/}) will fire when that element selected is clicked
$(selector).submit(function(){/*some function*/}) will fire when a form is being submitted

In your base, if you want to change color when it's red, you might want to do the background color change function whenever the add button is clicked

Hope this helps.