Javascript 如何将窗口调整大小事件绑定到插件实例

我正在创建一个jQuery插件，我需要让它响应窗口大小调整事件。我遇到的问题是，如果你只有一个插件实例，它就可以正常工作，但是如果你只有多个插件实例，那么以后的插件就可以正常工作。我的插件代码看起来像

(function ($) {

    //Define it
    var MyPlugin = function (element, options) {
       //...
    };

    MyPlugin.prototype.init = function() {
        $that = this;
        $(window).bind('resize',function(e) {
            //This only seems to get called for the last instance of the plugin
            $that.recalculate();
        });
    }

    MyPlugin.prototype.recalculate = function() {
    }

    $.fn.myPlugin = function (option) {
        return this.each(function () {
            var $this   = $(this);
            var options = typeof(option) === 'object' ? option : {};
            new MyPlugin(this, options));
        });
    };
}(jQuery));

问题是，并不是每个插件实例都调用窗口调整大小事件，所以如果我有两个这样的实例，那么只有div2可以工作

$('.div1').myPlugin();
$('.div2').myPlugin();

---

尝试使用下面的代码更改代码

$.fn.myPlugin = function (option) {
    var options = typeof(option) === 'object' ? option : {};
    return new MyPlugin(this, options);
};

---

我认为没有办法对每个实例执行多次窗口调整。 尝试创建一个全局数组来存储实例，并在调整大小时恢复它

var instances = [] ;

(function ($) {

    //Define it
    var MyPlugin = function (element, options) {
        instances.push(this);
        this.element = element;
        this.init();
    };

    MyPlugin.prototype.init = function() {
        $that = this;
        $(window).bind('resize',function(e) {
            $that.recalculate();
        });
    }

    MyPlugin.prototype.recalculate = function() {
        for(i in instances)
            console.log('recalculate', instances[i].element.html());
    }

    $.fn.myPlugin = function (option) {
        var options = typeof(option) === 'object' ? option : {};
        return new MyPlugin(this, options);
    };
}(jQuery));

$('.div1').myPlugin();
$('.div2').myPlugin();

---

请参见一个示例

其中定义了$，调整大小处理程序做什么？您假设只调用最后一个处理程序几乎是肯定的wrong@Amit我已经更新了代码，让它更清晰