Calling another function or method from within a click handler in CoffeeScript

Question

I am a CoffeeScript n00b, and I am struggling with calling another function from within my click handler.

The first alert appears, but the second does not.

CourseGuide =

    init: ->

      $('.js-size-unit-button').on 'click', (e) ->
        alert 'hello world - test'
        @clickHandler(e)

      clickHandler: (e) ->
        e.preventDefault()
        console.log 'hello world - test 2'
        alert 'hello world - test 2'

module.exports = CourseGuide

This is the error in the console:

TypeError: this.clickHandler is not a function

Do I have a basic syntax error?

Kryten · Accepted Answer · 2015-11-09 18:04:05Z

2

You're almost there... Change the code from this:

$('.js-size-unit-button').on 'click', (e) ->

to this:

$('.js-size-unit-button').on 'click', (e) =>

Why does this work? the "fat arrow" (=>) tells the CoffeeScript compiler to ensure that the value of this in the event handler refers to the class you've defined, instead of something else. Usually, in Javascript, if you use this in an event handler, this refers to the element on which the event was triggered.

This is described in the section entitled "Bound Functions, Generator Functions" in the Coffescript documentation.

You may also need to change the declaration of the init method from:

init: ->

to:

init: =>

to ensure that the value of this has something to refer to when the event handler is defined.

answered Nov 9, 2015 at 18:04

Kryten

15.8k7 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling another function or method from within a click handler in CoffeeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related