When a user clicks on an image I run a method:
$('#file-list li img').on('click', this.beeClick);
Later on, I add more images, to the list but the event fails to work. How can I apply this so that any new images also can be clicked on?
Asked
Active
Viewed 35 times
-1
-
Also http://stackoverflow.com/questions/18414695/attaching-events-after-dom-manipulation-using-jquery-ajax – mplungjan Jun 23 '14 at 14:51
1 Answers
2
You need to use event delegation. Try this:
$('#file-list li').on('click', 'img', this.beeClick);
If you are dynamically adding an 'li' tag and an 'img' tag (not just an 'img' tag) to the already created element with an id of 'file-list' then you would need to change it to:
$('#file-list').on('click', 'img', this.beeClick);
MDiesel
- 2,647
- 12
- 14
-
@panthro, are you dynamically adding the 'img' tag and the 'li' tag or just the 'img' tag? – MDiesel Jun 23 '14 at 14:55
-
I clone a li template on the page and then add the img tag to that clone. – panthro Jun 23 '14 at 14:57
-
@panthro, I updated my example. Take a look at the second code snippet, you would need to use that. – MDiesel Jun 23 '14 at 14:58