jquery animation not working on dynamic elements

Question

this may be useful to see where I am coming from. h[link text][1]ttp://stackoverflow.com/questions/1005006/jquery-nested-each-problem Note: jQuery is used instead of the $ idiom because this is what wordpress requires.

I am adding divs with elements 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 have an existing div with id 'list'.

I am trying to make an animation on the new div(s - there are multiple div's with this id) like so:

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. I am new to jquery.

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...