1

There is something like this:

<tr onclick="console.log($(this));">

I know its bad but its a legacy code. I would like to get the reference of this TR but this:

<tr onclick="console.log($(this));">

Nor this:

<tr onclick="console.log(this);">

Works, it thinks that this is <tr onclick=" event itself.

Improve this question
6
  • 5
    this refers to the DOM object of the element Commented Jan 2, 2017 at 16:40
  • 1
    "nor this:<tr onclick="console.log(this);"> works, it thinks that this is <tr onclick=" event itself." What is "it"? Can you create a stacksnippets to demonstrate? Commented Jan 2, 2017 at 16:47
  • 1
    A simple way to not even have this problem is to stop using inline event handlers right now and for good. There is not a single scenario where an inline event handler preferable. Commented Jan 2, 2017 at 16:56
  • 1
    Being legacy code doesn't mean you can't update it, surely? Unobtrusive JavaScript is rather better from a maintenance point of view, if nothing else. Commented Jan 2, 2017 at 16:56
  • 1
    @Tomalak "There is not a single scenario where an inline event handler preferable." Node.cloneNode()? Commented Jan 2, 2017 at 17:11

2 Answers 2

Reset to default
1

Not sure what you expect from $(this) to return but it refer to the tr as you could see in the example below.

NOTE : The $(this) keyword refer jQuery object and this refer to the DOM object they aren't the same.

Take a look to What is the dollar sign in Javascript, if not jQuery. Hope this helps.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr onclick="console.log($(this).html(),this.innerHTML);"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr onclick="console.log($(this).html(),this.innerHTML);"> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

console.log($(this).html()); returns "TypeError: $(...).html is not a function". Like I said console.log($(this)); and console.log(this); returns the same
The $(this) object refer jQuery object and this refer to the DOM object they aren't the same.
@ZakariaAcharki Note, $ can also reference function $(selector, [startNode]) { [Command Line API] }
Yes it may, thanks for your intervention, updated my answer.
1

It's important to distinguish between jQuery and plain javascript here.

  • $(this) is a jQuery object and takes jQuery methods.

  • this is a plain javascript keyword and takes plain javascript methods.

Example:

td { width: 100px; height: 100px; line-height: 100px; font-size: 80px; text-align: center; color: rgb(255,255,255); background-color: rgb(255,0,0); }
<table> <tr onclick="console.log(this.innerHTML);"> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

Improve this answer

8 Comments

That's unfortunate wording. jQuery is native Javascript as well.
Probably you can help me out here, @Tomalak - I used to refer to library-less javascript as "vanilla javascript". More recently I have referred to it as "native javascript". What is the conventional way to refer to library-less, framework-less javascript?
"Vanilla" is the term I would use. It's all Javascript, after all. Even the DOM is just an API. In a browser, it's just magically always available. Programming against the DOM is not more less native than programming against a DOM wrapper/utility belt like jQuery. I've seen so many beginners who think that jQuery and Javascript are somehow different things instead of steps on the same pyramid. So I think wording should be such that it does not reinforce that kind of misconception.
"$(this) is a jQuery object and takes jQuery methods." Is jQuery defined? If jQuery is not defined what would $(this) reference?
@Tomalak - I've updated vanilla javascript to plain javascript. I'm not sure it's much better (though it is marginally) but I've spent thirty-odd minutes searching the web for something better and there seems to be no conventional term for unembellished, unadorned, library-less, framework-less javascript. And the reason I stopped using vanilla javascript is because I began to see how widely the joke is misunderstood.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.