Usage of javascript `this.closest` in IE11 and Chrome

Question

In IE11 the below code shows the following error, But it is working in Chrome

Object doesn't support property or method 'closest'4:31 PM 09/07/16

assetTable.on("click", "td.clickProgress", function onDataTableRowClicked(event) {
  var tr = this.closest("tr");
  var assetId = tr.id.replace("asset_", "");
  LoadDialog(assetId);
}

However, when I change it to $(this) it is working in both IE and Chrome

assetTable.on("click", "td.clickProgress", function onDataTableRowClicked(event) {
  var tr = $(this).closest("tr");
  var assetId = tr.attr('id').replace("asset_", "");
  LoadDialog(assetId);
}

Any reason behind this compatibility issue between browsers?

`this` is a reference to the matched element, which only has DOM properties. `$(this)` is a reference to a jQuery collection containing the element, which has jQuery methods/properties. There is an *experimental* implementation of *closest*; but [you shouldn't use it](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest). — Sampson, Sep 07 '16 at 23:41

Andrew Li · Accepted Answer · 2016-09-08T00:00:52.433

Check out MDN's compatibility table for element.closest. Per the link:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

element.closest is an experimental technology not supported on IE. In this case you use JavaScript's this, unmodified. The reason why $(this).closest works is because you are wrapping this into a jQuery object, making it use jQuery's closest function.

Usage of javascript `this.closest` in IE11 and Chrome

1 Answers1