change image jquery keeping onclick

Question

I have an image that I want to change via jquery:

<div id="imagepr">
  <img class="imageprofile" src="$picimgprofile" alt="img" onclick="show_popup('popup_upload')>
</div>

the problem is, I want just to change the IMAGE (.imageprofile) and allow, after it, the onclick function to be called again.

If I change like this:

$("#imagepr").html(data);

it will destroy the onclick; and this:

$(".imageprofile").html(data);

is not working.

what is wrong? how can I change just the image keeping the onclick after it?

Answer 1

You can update only the src attribute of image, in this way you will not lose onclick attribute :

$(".imageprofile").attr("src","new-image-source");

Answer 2

If you're using jQuery, you probably dont want to be using inline onclick event handlers. Instead attach a click event using jQuery

$('#imagepr').on('click','.imageprofile',function(){
   // do whatever you want here when clicking the image
});

Later if you completely replace the content of <div id="imagepr"> as long as it has an image with the class .imageprofile it will still respond to the same click event