How call object methods from a jquery callback

Question

Maybe I am missing something, but I can't figure out how can I call one of the methods of the Listviewclass from the click callback.

Here's the code:

function Listview(el, cb) {

    this.element = el;
    this.callback = cb;

    this.select = function (element, index) {
        ...
    };

    this.selectElement = function (element) {
        ...
    };

    this.unselectCurrentElement = function () {
        ...
    };

    this.element.find('li').click(function () {
        // Here I want to call for example the selectElement method
        // but how? 
        // The This keyword reference the "li" element
    });

    this.element.addClass("Listview");
    this.select(this.element, 0);
};

T.J. Crowder · Answer 1 · 2014-08-31T16:16:52.137

You have several options:

Since you're defining your click handler function inline anyway, use a local variable your handler closes over:

var inst = this;
this.element.find('li').click(function () {
    // `inst` is your instance, `this` is the element
    inst.selectElement(this);
});

Use jQuery's proxy:

this.element.find('li').click($.proxy(function (e) {
    // `this` is your instance, `e.currentTarget` is the element
    this.selectElement(e.currentTarget);
}, this));

Use ES5's Function#bind:

this.element.find('li').click(function (e) {
    // `this` is your instance, `e.currentTarget` is the element
    this.selectElement(e.currentTarget);
}.bind(this));

How call object methods from a jquery callback

1 Answers1