Добавьте новое изображение в jquery и сделайте его clickable

Question

Я пытаюсь добавить изображение в jquery, а затем сделать его доступным для клика. Я сделал следующий код ниже, но он не работает.

Он добавляет изображения, но не делает их доступными для просмотра.

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


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

Answer 1

Если вы хотите, чтобы элемент с определенным классом всегда реагировать на событие щелчка, необходимо использовать один из методов JQuery в сделать это. Когда вы просто используете click(), вы в основном говорите jQuery, чтобы применить этот прослушиватель событий к элементам этого класса прямо сейчас, а не для каждого присутствующего и будущего. Для этого, JQuery имеет on() метод:

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

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

Edit: Я должен также упомянуть метод delegate(), только в случае, если вы найдете больше значения в делать это таким образом:

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

Answer 2

использования .live() добавить обработчик событий для элементов, создаваемых после загрузки страницы

Answer 3

Для привязки к элементам, которые появляются или вставлены в будущем (например, в вашем случае вы вставляете целые img), вы должны использовать функции .live() или .delegate().

подробная документация доступны оба ниже -

.live()

.delegate()

Answer 4

Для того, чтобы только изображение в ссылку использовать код ниже:

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