title: How to get data-id value in jquery
body: <p>I didn't find an answer to my question in previous threads...so I have to ask.</p>
  <p>I have a table with latest column with action button, the td tag include a data-id reference as follows:</p>
  <pre><code>&lt;td data-id=&quot;1&quot;&gt;
      &lt;div class=&quot;btn-group dropdown&quot;&gt;
          &lt;a href=&quot;javascript: void(0);&quot; class=&quot;table-action-btn dropdown-toggle arrow-none btn btn-light btn-sm&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;mdi mdi-dots-horizontal&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;mdi mdi-pencil mr-2 text-muted font-18 vertical-middle&quot;&gt;&lt;/i&gt;Edit&lt;/a&gt;
              &lt;a class=&quot;dropdown-item history&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;mdi mdi-check-all mr-2 text-muted font-18 vertical-middle&quot;&gt;&lt;/i&gt;AC history&lt;/a&gt;
              &lt;a class=&quot;dropdown-item remove&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;mdi mdi-delete mr-2 text-muted font-18 vertical-middle&quot;&gt;&lt;/i&gt;Remove&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;mdi mdi-star mr-2 font-18 text-muted vertical-middle&quot;&gt;&lt;/i&gt;Mark as Unread&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/td&gt;    
  </code></pre>
  <p>Using the following javascript code I'm trying to get the data-id attribute when the user click on the dropdown menu. I'd liket o to use the class into the i tag...without adding any extras class or tag</p>
  <pre><code>jQuery(document).ready(function() {
      $(&quot;body&quot;).on(&quot;click&quot;,&quot;.mdi-pencil&quot;,function(){
              
         var id = $(this).parent().parent().parent(&quot;td&quot;).data('id');
      
         console.log('ID is ' + id);
      });
   });
  </code></pre>
  <p>The code doesn't work and I cannot even get the console.log feedback in Chrome console. I can easily add an extra class into the a href tag and doing so the code work...but as I wrote above I'd like to avoid extras classes.</p>
  <p>Thanks a lot for any help</p>