OOP Javascript, attach click handler to button from constructor does not work as espected

Question

I want create an handler 'click' from a Javascript class and attach it to a simple button.

I created a simple Javascript class :

// from ./myclass.js
class Myclass
{
    constructor()
    {
        $("input.showAlert").bind("click", this._showAlert());
    }
    _showAlert(e){
        alert("foo");
    }
}

module.exports = {
    Myclass
};

And from my main js file :

// from ./main.js
const { Myclass } = require("./myclass");
var faa = new Myclass();

But if I do that, when I load my page via a browser, the alert "foo" appears automatically. I don't understand why and I don't want the alert is displaying automatically, but only when I click on the button 'input.addButton'.

My (very) simple html file :

<input class="showAlert" />

Where is my mistake ?

this._showAlert() <-- you are calling it and setting what it returns to the event listener — epascarello, Nov 15 '18 at 14:03
`.bind` has been deprecated for like 10 yrears, consider `.on` — Benjamin Gruenbaum, Nov 15 '18 at 14:04

score 2 · Accepted Answer · answered Nov 15 '18 at 14:03

2

You shouldn't call your menthod here

$("input.showAlert").bind("click", this._showAlert());

Just pass the link to this method as:

$("input.showAlert").bind("click", this._showAlert);

answered Nov 15 '18 at 14:03

Andrii Starusiev

7,564
2
28
37

thanks you ! that was stupid haha – spacecodeur Nov 15 '18 at 14:15

score 1 · Answer 2 · answered Nov 15 '18 at 14:04

1

By writing this._showAlert() you immediately call the function, try this._showAlert

answered Nov 15 '18 at 14:04

Guerric P

30,447
6
48
86

OOP Javascript, attach click handler to button from constructor does not work as espected

2 Answers2