title: jQuery .on() click event catching dynamic 'data-' attribute in list of buttons to pass value to other function?
body: <p>I have a dynamic table list of around 40 rows each with an edit button containing a date field.
  I also have the following click event script trying to attach to each button via a common class which needs to access the value of a data- attribute within the button image code seen further below:</p>
  
  <pre><code>$('.showEdt').each(function () {
     var $this = $(this);
     $(this).on("click",$this.data('eValz'), function () {
            alert(this);
     });
   });
  </code></pre>
  
  <p>Example of the edit buttons which are dynamically generated:</p>
  
  <pre><code>&lt;img src="edit.png" title="edit" class="showEdt" data-evalz="(eyCKeVua/TNF117)" /&gt;
  </code></pre>
  
  <h2>Problem:</h2>
  
  <p>The script loads ok, when the edit button is clicked the alert displays:
  [object HTMLImageElement]  instead of the data-evalz value ??</p>
  
  <p>Please provide suggestions of how I can access the data unique to the button that is clicked? </p>