jQuery image click function has no effect

Question

I have a situation where only the first click of an image works, the second time when clicked the other function doesn't run.

<script>
jQuery(document).ready(function($) {
   $('#temp_container img').click(function(){
     var img = $('#temp_container img').attr('src');
     $('#temp_container2').append('<img src="'+img+'">');
   });

   $('#temp_container2 img').click(function(){
     alert('works');
   });
});
</script>

<div id="temp_container">
   <img src="http://cdn-images.farfetch.com/10/62/22/35/10622235_3103339_170.jpg">
</div>
<div id="temp_container2"></div>

When you click on the image in div temp_container, the image is duplicated and appended to temp_container2, when clicking on the image in div temp_container2 an alert should be executed. But for some reason this doesn't execute when run. I've been stuck on this issue for hours.

Thanks

Look at delegating events in jQuery - since you are declaring the 2nd listener before there is any content in #temp_container2 you won't be able to bind onto it directly at that point. — Rob Schmuecker
– Rob Schmuecker, Commented Feb 24, 2014 at 11:12
Since dom is updated... you will have to use on() method... check event delegation — sinisake
– sinisake, Commented Feb 24, 2014 at 11:13

Adil · Accepted Answer · 2014-02-24 11:17:08Z

4

You need event delegation using on() as you are adding elements dynamically.

Demo

$('#temp_container2').on('click', 'img', function(){
   alert('works');
});

While adding elements in $('#temp_container2') you probably need to use $(this).attr('src') instead of $('#temp_container img').attr('src')

 $('#temp_container img').click(function(){
  var img = $('#temp_container img').attr('src');
  $('#temp_container2').append('<img src="'+img+'">');
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery doc

edited Feb 24, 2014 at 11:17

answered Feb 24, 2014 at 11:13

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr. Alien Over a year ago

+1 Was answering the same, but you did it already so just added a demo, so hope you don't mind :)

user2028856 Over a year ago

Thanks for the really helpful reply. I've been testing this and I noticed that if there is another div above the temp_container2, then the on() doesn't seem to work jsfiddle.net/H57xr

Adil Over a year ago

You have pasted same link the one in the answer, and probably had to give some other link?

user2028856 Over a year ago

Actually I managed to get it working by chaining div's together in the selector. Thanks for the great help! :)

Mr. Alien · Accepted Answer · 2014-02-24 11:16:45Z

0

$('#temp_container img').click(function(){

Should be

$('#temp_container').click(function(){

Or you can create a new div for the image itself, this makes it easier.

edited Feb 24, 2014 at 11:16

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

answered Feb 24, 2014 at 11:13

user3319187

51 silver badge3 bronze badges

Collectives™ on Stack Overflow

jQuery image click function has no effect

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related