How to pass 'this' element via jquery on.('click') to the inside function

Question

If I had an element such as

<div class='some_class' onclick='executeF(this)'/>

would this be equivalent to:

$('.some_class').on('click',function(e){
    executeF(this);
});

or

$('.some_class').on('click',function(e){
    executeF(e);
});

or

$('.some_class').on('click',function(e){
    executeF($(this));
});

I don't have the means to test this at the moment so I just wanted to make sure what would be the direct correspondent jquery method before going further on my coding since (again) I can't test this right now

score 8 · Accepted Answer · answered Dec 12 '15 at 15:57

$('.some_class').on('click',function(e){
    executeF(e);
});

In above code, e stands for event object. To get current DOM element, you will need to use e.currentTarget

This here will represent the DOM element which has triggered event.

$(this) will give you jQuery's element array. can

You can test this on following code:

function Click(el) {
  console.log(el)
}

$(".some_class").on("click", function(e) {
  console.log("Event: ", e);
  console.log("Current Target of Event: ", e.currentTarget);
  console.log("this: ", this);
  console.log("$(this): ", $(this));
})

div {
  height: 100px;
  width: 100px;
  border: 1px solid silver;
  margin: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div onclick="Click(this)">JS</div>
<div class="some_class">JQuery</div>

Hope this helps!

score 0 · Answer 2 · answered Dec 12 '15 at 15:31

Callback functions in jQuery are invoked such that the value of this is a reference to the DOM element handling the event. Your first bit of sample code is therefore correct; the executeF() function will be passed the DOM element reference.

In the case of delegation:

$(document).on("click", ".some_class", function() {
  // `this` refers to the "some_class" element
});

the same still holds: this will refer to the delegate target element, as if the event handler were directly associated with it.

score 0 · Answer 3 · answered Dec 12 '15 at 15:51

The one which will be the equivalent will be the first one.

$('.some_class').on('click',function(e){
    executeF(this);
});

The argument 'e' refers to the 'Event' which invoked the function.

e.type = 'click'

The toElement method on event can give you back the element on which the event occurred as below

e.toElement

When a the 'onclick' is assigned as an attribute , "this" always refers to the 'DOMElement' which means the reference of 'this' is passed as an 'element'.

score 0 · Answer 4 · edited May 23 '17 at 12:00

0

Short answer would be to pass this like so.

  ExecuteF(){ Var elm = $this; Some other code for this function }

$('.some_class').on('click', executeF);

https://api.jquery.com/click/

Also might want to take a look at this post about obtrusive js

https://stackoverflow.com/a/8392446

edited May 23 '17 at 12:00

Community

1
1

answered Dec 12 '15 at 16:01

alphapilgrim

3,761
8
29
58

score 0 · Answer 5 · edited May 23 '17 at 10:27

0

Before you implement one of the solutions above, be sure you understand the difference between e.target and e.currentTarget. You should probably take a look at Difference between e.target and e.currentTarget

edited May 23 '17 at 10:27

Community

1
1

answered Dec 12 '15 at 16:04

Bindrid

3,655
2
17
18

How to pass 'this' element via jquery on.('click') to the inside function

5 Answers5