使用jQuery最接近的方法查找表行不起作用

Question

I m trying to get the row of a table using jquery closest method as below

function GetPackageSizeDescription() {
var row = $(this).closest('tr');
.....
//ajax call
data: { packageId: $(row).find('.packageId').val()}
}    

but after jquery executes this line of code var row = $(this).closest('tr'); the following line appears in the browser developer tools and I m unable to get the values of elements in that row. row = [prevObject: jQuery.fn.jQuery.init[1], context: undefined]

Any ideas?

The button element table cell looks like

 <td><button type="button" class="btn btn-sm btn-primary" onclick="GetPackageSizeDescription(); return false;">
     <span class="glyphicon glyphicon-info-sign"></span>
      </button>
  </td>

Answer 1

You need to send this through to the function as a parameter.

change to:

function GetPackageSizeDescription(element) {
var row = $(element).closest('tr');

and when you call GetPackageSizeDescription do:

GetPackageSizeDescription(this)

Answer 2

Or you can refactor your code to this...

HTML

<td><button id="getpackagesize-btn" type="button" class="btn btn-sm btn-primary">
     <span class="glyphicon glyphicon-info-sign"></span>
      </button>
</td>

JQUERY

$('#getpackagesize-btn').on('click', function() {

   var row = $(this).closest('tr');
   ...

   //ajax call
   data: { packageId: $(row).find('.packageId').val()}

   return false;
});