jQuery on and off for module instance

jQuery on and off for module instance

Hello, F irstly I want to apologize for my poor English.

I'm facing a problem.

I have a Single page application build with modules (With RequireJS).
I can have more instances of the same module in the page at the same time.

I try to manage events handlers for the module instance but I'm unable to use $.on and $.off for the current instance of my module.

Please find follow code to demonstrate my issue
  1. define([
        "jQuery"
    ], function($) {

        /**
         * Constructor
         */
        function myModule(){
           
        }
       
        myModule.prototype = {
            Container: undefined,
           
            Init: function(container, options, callback) {
               
                $(container).html('');
                $(container).addClass('img-loader');
           
                var that = this;
                that.Container = container;
               
                $(document).ready(function() {
                    /*
                    $(window).on('resize', function() {
                        that.redraw();
                    });
                    */
                    //$(window).on('resize', that.redraw); // don't works
                    $(window).on('resize.myModule', function() { //Works, but for all module instances.
                        that.redraw();
                    });
                   
                    if(typeof callback !== 'undefined' && typeof callback === 'function') {
                        callback();
                    }
                   
                    $(container).removeClass('img-loader');
                   
                });
            },
           
            redraw: function() {
                var that = this;
                if(typeof that.KendoChart !== 'undefined'){
                    that.KendoChart.redraw();
                }
            },
           
            destroy: function() {
                /*var that = this;
                $(window).off('resize.myModule', $(that.Container));*/
                $(window).off('resize.myModule');
            }
        };
        return (myModule);
    })

























































I have redraw method to refresh myModule when window is resize.

So I try to call:


  1. $(window).on('resize', function() {
                        that.redraw();
                    });

that work fine but I can't remove the handler only for the current instance in the destroy method.

I try :
  1. $(window).on('resize', that.redraw);
but it's don't work that.redraw is never call.

And I try:
  1. $(window).on('resize.myModule', function() { //Works, but for all module instances.
                        that.redraw();
                    });


  3. $(window).off('resize.myModule', $(that.Container));*/
It's works but not only for the current instance.


I hope I was clear enough.
I want to manage the listener for each module instances and keep my function to redraw the root MyModule.

Thank you in advance for help.