Add a new image in jquery and make it clickable

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>");

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 on() method:

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

http://api.jquery.com/on/

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/

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

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()

To make only image clickable use the code below:

$('.HeaderGifs').on('click',"img",function() {....}