addClass jQuery throw

Question

this is the start of a larger project but I'm running into an error as I test the basics on the frontend. The error is as follows

Uncaught TypeError: Cannot read property 'addClass' of undefined
    at HTMLDivElement.openOverlay (live-search.js?ver=1.0:20)
    at HTMLDivElement.dispatch (jquery.js?ver=1.12.4-wp:3)
    at HTMLDivElement.r.handle (jquery.js?ver=1.12.4-wp:3)

This is the code I have so far, for the moment I'm just testing the trigger to open and close an overlay.

(function($) {

class Search {
    constructor() {
        this.openButton = $("#search-icon-btn");
        this.closebutton = $(".search-overlay__close");
        this.searchOverlay = $(".search-overlay");
        this.events();
    }

    events() {
        this.openButton.on("click", this.openOverlay);
        this.closebutton.on("click", this.closeOverlay);
    }

    openOverlay() {
        this.searchOverlay.addClass("search-overlay--active");
    }

    closeOverlay() {
        this.searchOverlay.removeClass("search-overlay--active");
    }
}

var liveSearch = new Search();

})(jQuery);

Any help would be much appreciated!

Kei · Accepted Answer · 2019-08-28T00:33:46.260

1

When openOverlay is called as an event handler, "this" gets overridden. In this case, I believe it would refer to the openButton (the sender) rather than the Search instance. Thus, this.searchOverlay would be undefined.

There are several ways to get around this. You could use the bind method to explicitly bind "this."

events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closebutton.on("click", this.closeOverlay.bind(this);
}

Alternatively, you could set up openOverlay and closeOverlay to receive a reference to the Search instance.

events() {
    this.openButton.on("click", () => this.openOverlay(this));
    this.closebutton.on("click", () => this.closeOverlay(this));
}

openOverlay(self) {
    self.searchOverlay.addClass("search-overlay--active");
}

closeOverlay(self) {
    self.searchOverlay.removeClass("search-overlay--active");
}

Further reference: https://stackoverflow.com/a/20279485/11981207

edited Aug 28 '19 at 00:33

answered Aug 28 '19 at 00:09

Kei

1,026
8
15

That worked! Thank you! But I am confused about one thing. I wrote the original code above and a lot more some time ago and it still works in that application, so why would it not work on this new site? They are both WordPress setups with the most updated everything. I'm just worried as I keep duplicating everything I'm going to have to keep writing the original code. – Patrik CK Aug 28 '19 at 00:36
Hmm, I'm sorry but I'm not too sure. One possibility is that this part of the code isn't working on the original site, but there is other code in place that triggers the desired effect. On the original application, try opening the web console (F12 on most browsers) and see if there are any JavaScript errors showing up. – Kei Aug 28 '19 at 00:50

addClass jQuery throw

1 Answers1