How can I reuse JQuery dynamic tags?-Collection of common programming errors

I’m using a function to add images to a site. These go into a DIV, using .html() After that’s done I need those same images to show an effect on hover, but nothing happens when I hover them. If I type the same code I use in the .html() function, same class, etc, hover works.

After lots of attempts, I narrowed my problem to this sample. Turns out the problem is how the container DIV exposes the code added through .html() … and my hover functions can’t find the dynamically added tags.

Here’s my sample code:

Problems




This line was already here





function createnewone(){
   $txthtml="
And this one got added dynamically

";
   $("#DIVnewone").html($txthtml);
};
$(document).ready(function() {
   createnewone();
}); 
$("*").on("click", function(){
   alert( $(this).attr("id") );
});

Notes: – This is just a raw example of my real problem. This is not what I’m actually trying to accomplish, but solving this one would make me solve the real one 😉 – The first two functions are from the actual code … after document is ready I load the pics and recursively add the html required to each DIV … – Third function is just so you guys can see my problem … It should be showing an alert with the ID of the element you click on (and it does for the 1st paragraph) … but check what happens when you click the second one … you don’t see the ID for that paragraph but the ID for the container DIV instead! – (yes, it also gives alerts for the other parents, up to the document, but hey, it’s just an example)

– If I manually add the paragraph to that same DIV, the “static” paragraph shows its ID when clicked on, but the “dynamic” one still shows the DIV ID.

Please, advise?
(also, I need the script to stay at the bottom of my code, so it can “see” all the pics)

EDIT so my point is clearer: I need a way to add content to a DIV so other functions see the new code.

How would you guys replace this line so the sample code works as intended?

$("#DIVnewone").html($txthtml);

1. Have you tried appending the new element to the div rather than setting it via html(), though I believe .html() should work as well.

   function createnewone(){
      $txthtml="
   And this one got added dynamically
   
   ";
      $("#DIVnewone").append($txthtml);
   };
   

   then you can use the below ON function (1.7+) to do what you need it to do when you have the mouse over the selector (‘#TXTnewone’). Note that the below will need to go into the “$(document).ready(function() { ...here... }” function, this is to ensure the “body” tag has been loaded when assigning the on event to it.

   $(document).ready(function() {
       createnewone();
       $("body").on(
           {
                 mouseenter: function () { $(this).css("color","red"); }
               , mouseleave: function () { $(this).css("color","black"); }
           }
           , "#TXTnewone"
       );
   });
   

   Here is a jsFiddle of the above working.

2. You’re probably looking for the live() function.

   or on(), after jQuery version 1.7

   Description
   Attach an event handler for all elements which match the current selector, now and in the future.

3. Place your hover functions inside the event call that adds the dynamic content. Your hover functions are being evaluated before the content is added and aren’t re-evaluated after, causing them to be undefined.

   EDIT
   Robert Harvey’s answer is much better than this, but the idea is the same.

Originally posted 2013-11-09 20:19:38.