Click on element stored in javascript object not working

Question

I'm trying to select an DOM element and store it in an object and then later accessing it by a click event.

this._elements.convertButton.click(function(e) {
    _this.convertButtonClicked.notify();
});

If I initially select the element using JQuery all is fine

{ convertButton: $("#convert") }

However if I don't use JQuery the click does not work

{ convertButton: document.getElementById("convert") }

While using Jquery is not an major issue I was simply looking for clarification on how to make it work using pure javascript and why the click is fine on the JQuery object and not on the ordinary object.

The click method of a jQuery object (the return from $('convert')) is quite different from the click method of a DOM object. — RobG
– RobG, Commented Nov 29, 2016 at 0:03

Ajay Narain Mathur · Accepted Answer · 2016-11-28 23:42:27Z

2

Need to use addEventListener:

this._elements.convertButton.addEventListener("click",function(e) {
    _this.convertButtonClicked.notify();
});

answered Nov 28, 2016 at 23:42

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

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

Comments

Kyle Lin · Accepted Answer · 2016-11-29 00:28:56Z

1

Two solutions:

1. jQuery:

$(this._elements.convertButton).click(function(e) {
    _this.convertButtonClicked.notify();
});

2. Plain Javascript:

this._elements.convertButton.addEventListener('click', function(e) {
    _this.convertButtonClicked.notify();
}

Explanation: What's probably happening is this._elements.convertButton is an Element instance, not a jQuery object, so the jQuery .click() method is unavailable. You can either use the standard .addEventListener('click', ... as an alternative, or wrap this._elements.convertButton in a jQuery object by using $(this._elements.convertButton).

answered Nov 29, 2016 at 0:28

Kyle Lin

8698 silver badges18 bronze badges

Collectives™ on Stack Overflow

Click on element stored in javascript object not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related