CODEWITHSUNDEEP
javascriptjquery
Shahar Shokrani
Shahar Shokrani

Reputation: 8740

Resize event not firing after binding

I'm using bind on bind on jQuery to click and resize listeners with unique namespace - so I can unbind them safely.

When pressing click - it is logging the "Mouse Clicked" message.

But when changing the window size - nothing happans.

class MyView {
    constructor() {
        $(window.document).on('click.myView', this._onDocumentClick.bind(this));
        $(window.document).on('resize.myView', this._onDocumentResize.bind(this));
        $('#clean').on('click', this._cleanup.bind(this));
    }
    _cleanup() {
        $(window.document).unbind('resize.myView');
        $(window.document).unbind('click.myView');
    }
    _onDocumentResize() {
        console.log('Window Resized'); //Not reaching here
    }
    _onDocumentClick() {
        console.log('Mouse Clicked'); //OK
    }
}

Any ideas what is the difference between the resize and click event?

Upvotes: 0

Views: 285

Answers (1)

Terry
Terry

Reputation: 66103

That's because the resize event is fired by the window object, not the window.document object :) therefore, this should work:

$(window).bind('resize.myView', this._onWindowResize.bind(this));

p/s: In your initial event handler binding, you seem to have swapped the callback and the events, i.e. resize triggering the private click method, and vice versa.

Even better: don't use .bind() anymore, newer versions of jQuery recommends using .on(), i.e.:

$(window).on('resize.myView', this._onWindowResize.bind(this));

Upvotes: 1

Related Questions