Add a new image in jquery and make it clickable

Question

I am trying to add an image in jquery and then make it clickable I have maked the following code below but it does not work.

It adds the images but it will not make it clickable.

 $(".HeaderGifs").click(function() { 
 alert("It Works");
 }); 


 $("#show_images").val()).append("<img class='HeaderGifs' src='images/text.jpg'></img>");

Answer 1

use .live() to add event handlers to elements that you create after page load

Answer 2

If you want an element with a particular class to always respond to the click event, you need to use one of jQuery's methods to do this. When you just use click(), you're basically telling jQuery to only apply that event listener to elements with that class right now, instead of for every element present and future. For this purpose, jQuery has the live() method:

$('.HeaderGifs').live('click', function() {....}

http://api.jquery.com/live/

Edit: I should also mention the delegate() method, just in case you find more value in doing it this way:

http://api.jquery.com/delegate/

Answer 3

For binding to the elements occuring or inserted in the future (like in your case you are inserting whole img tag later ) you have to use .live() or .delegate() functions.

The detailed documentation for both are available below -

.live()

.delegate()