jQuery数据返回未定义

Question

I am trying to retrieve the data using jquery, but I keep on getting undefined as the value. The html code is being echoed to the document by a PHP function. Thanks

<td data-id='332'>
  <i class="fa fa-trash delSubCat"></i>
  <a href='#'>Validate</a>
</td>

$(document).on('ready',function(){
  $(this).on('click',function(event){
    event.preventDefault();
    console.log($(this).parent().data("id"));
  });

});

Answer 1

There are two problem

1) You didn't follow the hierarchy of table and tr above td and therefore it is not getting rendered properly.

2) You added listener on this instead of

 <table>
      <tr>
    <td data-id='332'>
      <i class="fa fa-trash delSubCat"></i>
      <a href='#'>Validate</a>
    </td>
        </tr>
    </table>

JS

  $('a').on('click',function(event){
    event.preventDefault();
    console.log($(this).parent().data("id"));
  });

Working jsfiddle:

https://jsfiddle.net/Lbagfn7o/

Answer 2

You are missing <table> tag that's why the parent of a becomes body because of invalid structure

 $(document).on('ready',function(){ $('a').on('click',function(event){ event.preventDefault(); console.log($(this).parent().data('id')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <td data-id='332'> <i class="fa fa-trash delSubCat"></i> <a href='#'>Validate</a> </td> </table>