How do I animate multiple dynamically generated DOM elements?

Question

This may be useful to see where I am coming from. Jquery nested each problem

I am adding divs to the page with this code:

jQuery("#list").append(
    jQuery("<div>")
        .attr("id", "Entry")
        .html(html)
);

html is just a string containing some text and an anchor.

I am trying to animate the new divs - there are multiple div's with the id #Entry.

Here's my code:

jQuery("#Entry").hover(function(){  
    jQuery(this)
    .animate({
        width:"50%",
        fontSize: "30px",
        opacity: 0.3,
        borderwidth: "15px"
    }, 500);  
});

The above is in my jQuery(document).ready(function(){ } function, if that matters.

Answer 1

First of all, if you are adding more than 1 <div> with that id, you are doing it wrong. id attributes should (must) be UNIQUE in a document. Having more than 1 element with the same id will make Javascript go haywire because it is not supposed to happen. It would be the equivalent of two people with the same social security number. :) The common and best practice when it comes to groups of elements is to give them all a class and select them that way.

Past that, you should look into the live function, which does what you want. Essentially, when you run a piece of code on your document ready, it is being executed against the current state of the document. In other words, only elements that exist at that point in time (that match the selector provided) will be bound to the event you provided. The live function was created as a way to get around this. Another solution would be to run the binding code again after you add a new <div>, but that is not as clean as just using live, which supports the mouseover and mouseout events you're going to need to do the hover.

Answer 2

live() supports all events including custom events in the latest jQuery...