click() calls the click function not returns the click function

Question

I'm in day 1 of a learning java script MOOC.

We're looking at simple jQuery examples.

Right off there's something I don't understand.

An expression such as $("#xyz").html() returns the text in the element. For example if the corresponding html was <h1 name=xyz>hello world</h1>, then $("#xyz").html() evaluates to the string "hello world". I hope I understand this so far. And $("#xyz").html("new text") sets the text to "new text" so that the next call to $("#xyz").html() returns "new text".

And, the expression $("#xyz").click(function (){42}) sets the click function to a function which will return 42. However, the presenter of the course claims without explanation that $("#xyz").click() calls the click function and returns 42. I would expect that $("#xyz").click() returns a function, not a number.

Am I confused? What's the logic here?

CertainPerformance · Answer 1 · 2021-03-27T14:39:56.370

.click is overloaded. It's a bit confusing. You can use it to either call a click handler, or to add a click handler.

If you pass it a function, it will add a click handler. If you don't pass it anything, it'll invoke click handlers.

// Add a click handler
$('button').click(() => { console.log('clicked'); });

// Invoke a click handler
$('button').click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>

To make things clearer, I'd recommend using the way jQuery recommends to attach handlers nowadays, using .on, and to trigger handlers with .trigger:

// Add a click handler
$('button').on('click', () => { console.log('clicked'); });

// Invoke a click handler
$('button').trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>

It's more intuitive than the overloaded .click and is more generalizable to other events.

However, the presenter of the course claims without explanation that $("#xyz").click() calls the click function and returns 42. I would expect that $("#xyz").click() returns a function, not a number.

Neither of these is correct:

The callback doesn't return anything, and isn't using the implicit return of an arrow function, so the 42 is inaccessible to anything outside the handler
Even if the 42 was returned, .click does not return what the handler returns, but it returns the jQuery collection it was called on. For example, you can do

$('.someElement')
  .click(clickHandler)
  .addClass('clickable');

to add a click handler and also add a class to an element.

And how can I get the click function? I.e., get back the function someone most recently passed to `.click(...)` ? — Jim Newton, Mar 27 '21 at 14:38
Your code uses jQuery 3.3.1, I see that the MOOC is using jQuery 1.11.3. I'll continue with the MOOC, as I've already paid, to understand the concepts. But I imagine lots has changed since 1.11.3. — Jim Newton, Mar 27 '21 at 14:40
See https://stackoverflow.com/a/2518441 It's possible, but kinda weird. If the callback is really needed, I think it'd make a bit more sense to store it in a variable first, than to go through `events` to retrieve it later. — CertainPerformance, Mar 27 '21 at 14:41

click() calls the click function not returns the click function

1 Answers1