Delegated event handler runs more than once for one class

I have a problem with delegated event used for click function, I have four images with different id but with the same class "edit_agent_val", when I click on any image, the function is triggered four times instead of once.

Here's the code I used: Don't forget to take a look at the images I'm working with:

<img id="treegrid-1" class="edit_agent_val" src="/palodrive/img/addb.svg" data-user="Player" data-name="pessimist">
<img id="treegrid-2" class="edit_agent_val" src="/palodrive/img/addb.svg" data-user="Player" data-name="Naugahyde">
<img id="treegrid-3" class="edit_agent_val" src="/palodrive/img/addb.svg" data-user="Player" data-name="lemma">
<img id="treegrid-4" class="edit_agent_val" src="/palodrive/img/addb.svg" data-user="Player" data-name="rackoz">

      

        
        
        
      

    

And here's a function that gets executed four times, not once:

jQuery(document).ready(function($) {
     $(document).on('click', '.edit_agent_val', function() {    
         alert("sdsdsd");
     });
});