Question

Possible Duplicate:
How can I detect when a new element has been added to the document in jquery?

I have a list of comments in a normal ul element. When loading the page I use something like (the system is based on templates)

<li id="someId">Some Content</li>
<script>doStuffWithLi('someId');</script>

So if the page is loaded and there are some li’s, each one based on the template, there is this block for each li.

Now people can post a new comment and the template and the content is loaded into the page again – but this time the script is not executed. I guess js that is loaded after document ready in general is not executed, ones the document is loaded?

Unfortunately there is no jQuery function like $('li').live('ready', function() {});.
I tried it with the livequery plugin like $('li').livequery(function() {//DO STUFF}); – But this didnt work as well. I cannot simply add a call to the creation of the element, because i can not influence the function adding the comment.

Is it possible to call a function as another li is added?

Answer 1

You could use the event DOMSubtreeModified. Assign this event to the parent of your lis and check if the event gets fired if there is a new li. In this case you assign a new handler to that li.

$("#li_parent").bind("DOMSubtreeModified", function() {
    alert("possibly a li has been inserted");
    // do your magic here
});