绑定后未触发调整大小事件

Question

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?

Answer 1

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, ie resize triggering the private click method, and vice versa.

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

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