精炼ui.resizable以提供重置方法

Question

我有一个用例，我需要将textarea的大小重置为它的初始大小。我从this solution开始，在设置选项时重置，然后到达：

$.widget("ui.resizable", $.ui.resizable, {
    options: {
        origWidth: 0,
        origHeight: 0
    },

    _create: function() {
        this._super();
        this.options.origWidth = $(this.element).width();
        this.options.origHeight = $(this.element).height();
    },

    reset: function() {
        this._resize(
            this.options.origWidth,
            this.options.origHeight
        );
    },

    _resize: function(width, height) {
        width != null && $(this.element).width(width);
        height != null && $(this.element).height(height);
        this._proportionallyResize();
    }
});

我正在使用此设置：

CSS

#textarea-resizer { width: 200px; }
#textarea { width: 100%; height: 100%; overflow: auto; resize: none; }

HTML

<div id="textarea-resizer" style="width: 175px">
  <textarea id="textarea"></textarea>
</div>

<input type="button" id="reset" value="Reset" />

JS

$('#textarea-resizer').resizable({
    handles: "se",
    alsoResize: '#textarea',
    minHeight: 23,
    minWidth: 175
});

$('#reset').click(function() {
    $('#textarea-resizer').resizable('reset');
});

（“andResize”的原因是ui.resizable对textarea元素做了有趣的事情）

问题是按下“重置”按钮会改变#textarea-resizer，而不是#textarea。我怎样才能正常工作？另外，我应该做些什么来使它与Resizable的工作原理相符吗？