jQuery, how to get reference from onclick inline?

Question

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.

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. — Tomalak, Jan 02 '17 at 16:56
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. — David Thomas, Jan 02 '17 at 16:56
@Tomalak _"There is not a single scenario where an inline event handler preferable."_ `Node.cloneNode()`? — guest271314, Jan 02 '17 at 17:11
@guest271314 Not a good example. That's what event delegation is for. Also, jQuery has implemented a way to clone nodes with event handlers, see https://api.jquery.com/clone/. — Tomalak, Jan 03 '17 at 09:52

score 1 · Answer 1 · edited May 23 '17 at 11:46

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>

edited May 23 '17 at 11:46

Community

1
1

answered Jan 02 '17 at 16:42

Zakaria Acharki

66,747
15
75
101

console.log($(this).html()); returns "TypeError: $(...).html is not a function". Like I said console.log($(this)); and console.log(this); returns the same – John Smith Jan 02 '17 at 16:46
1

The `$(this)` object refer jQuery object and `this` refer to the DOM object they aren't the same. – Zakaria Acharki Jan 02 '17 at 16:51
1

@ZakariaAcharki Note, `$` can also reference `function $(selector, [startNode]) { [Command Line API] }` – guest271314 Jan 02 '17 at 16:53
1

Yes it may, thanks for your intervention, updated my answer. – Zakaria Acharki Jan 02 '17 at 16:57

Rounin · Answer 2 · 2017-01-02T21:40:35.230

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>

edited Jan 02 '17 at 21:40

answered Jan 02 '17 at 16:56

Rounin

27,134
9
83
108

1

That's unfortunate wording. jQuery is native Javascript as well. – Tomalak Jan 02 '17 at 16:57
2

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? – Rounin Jan 02 '17 at 17:03
1

"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. – Tomalak Jan 02 '17 at 17:10
1

_"`$(this)` is a jQuery object and takes jQuery methods."_ Is jQuery defined? If jQuery is not defined what would `$(this)` reference? – guest271314 Jan 02 '17 at 17:13
1

@guest271314, do you think that '$' function is defined, in this case, and it is not related to jQuery, and it returns current event (?) - errors thrown (html() is not a function) suggest it? – sinisake Jan 02 '17 at 17:15
1

@sinisake Not certain given total contents of current Question, though a possibility. – guest271314 Jan 02 '17 at 17:16
2

@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. – Rounin Jan 02 '17 at 21:48
Naming is hard, even here. I find "vanilla" easier to explain than "native", if someone does not know the term. That's also why I mentioned the DOM, because it means that in a browser even "vanilla" is not really true. It's not also not true for node.js with no modules loaded, because in node, `fs` is always availabe. It's not easy. :) – Tomalak Jan 03 '17 at 09:44

jQuery, how to get reference from onclick inline?

2 Answers2