How can I have a jQuery onclick function return the element instead of the event?

Question

I have a function called deleteTask which currently just does console.log(this)

<input type="button" value="Delete Task" onclick="deleteTask()"/> (note that this in a jQuery function, not in a HTML file) returns [object Window]

while del.onclick = deleteTask; (where del is the input button) returns the object that was clicked, in this case, <input>

How can I have the jQuery version output similarly to the pure JS one?

I may have been wrong to flag this as jQuery, but the`` code snippet is in a jQuery function aka something like `<$('#createTask').on('click', () => {` — asko1, Jul 07 '21 at 21:28

score 0 · Accepted Answer · answered Jul 07 '21 at 21:24

0

You could use Function#call, but it is generally better to use addEventListener.

function deleteTask() {
  console.log(this)
}

<input type="button" value="Delete Task" onclick="deleteTask.call(this)" />

answered Jul 07 '21 at 21:24

Unmitigated

76,500
11
62
80

Thank you, this worked perfectly! If I may ask, what makes using addEventListener better? – asko1 Jul 07 '21 at 21:33
@asko1 Happy to help. Take a look at this answer: https://stackoverflow.com/a/35093997/9513184 – Unmitigated Jul 07 '21 at 21:38

Kinglish · Answer 2 · 2021-07-07T21:46:59.607

0

In jQuery you'd set it up like this:

html:

<input type="button" value="Delete Task" data-role='delete' />

script:

$(document).ready(function() {
 $('[data-role=delete]').click( deleteTask )
})

function deleteTask() {
  // element clicked is this -- or if you want it ready for JQ: $(this)
}

edited Jul 07 '21 at 21:46

answered Jul 07 '21 at 21:40

Kinglish

23,358
3
22
43

1

The actual element is `this`. `$(this)` wraps it in a jQuery object. – Unmitigated Jul 07 '21 at 21:46

How can I have a jQuery onclick function return the element instead of the event?

2 Answers2