How to pass an anonymous function to Jquery's click handler

Question

I have a piece of code making use of Jquery's click() event handler below.

 //advance automaton by one step $('#nextstep').click(function() { if (canAdvanceAutomaton) { runAutomaton(logicalGrid); } }); 

I thought that .click() accepts an anonymous function, so I tried changing my code to the one below.

 //advance automaton by one step $('#nextstep').click = () => { if (canAdvanceAutomaton) { runAutomaton(logicalGrid); } }; 

I believed these two pieces of code would be equivalent, but it turns out the latter version doesn't run my canAdvanceAutomaton function when I click the html id with #nextstep , and I don't see any errors in the console. Can anyone tell me why these two ways of calling .click() are not equivalent?

Answer 1

Both codes are using anonymous functions, but in the second, you're trying to assign to the click property, when you should be passing the arrow function to the .click method :

$('#nextstep').click(() => {
  if (canAdvanceAutomaton) {
    runAutomaton(logicalGrid);
  }
});

Answer 2

Two things:

1. Your first function is anonymous. Your second one is also anonymous. The only difference between them is that the first is a traditional function and the second is an arrow function (which doesn't have its own this binding). More about the various different forms of functions (named and anonymous) in this answer .

2. The problem with your second thing is you're not calling click , you're assigning to click .

If you pass an arrow function into click , it'll work, but this within the function won't be the element that was clicked. (You can still get it from currentTarget on the event object it receives, though.)

$('#nextstep').click((e) => {
    // You can use `e.currentTarget` to know which was clicked
    if (canAdvanceAutomaton) {
        runAutomaton(logicalGrid);
    }
});