Jquery 使用HR标记调整文本区域的大小

我试图创建一个可调整大小的文本区域，并将水平规则作为句柄（类似于Stackoverflow编辑器）

我正在尝试：

<div class="container">
    <textarea class='editor'></textarea>
</div>

及

（函数（$）{
$（函数（）{
$（“.editor”）
.wrap（“”）
.parent（）
.append（“
”）；
$（“.resizable”）.resizable({
处理：{
s:$（“.resizer”）.get（）
}
});
});
})（jQuery）；

但这是行不通的。实际上什么也没发生

如何解决这个问题

---

仅供参考，这里有一个复制问题的程序。

好的，如果我手动注入jQuery和jQueryUI，实际上我的代码正在工作

可能是JSFIDLE的一个bug

更新的JSFIDLE：

更准确地说，我的第一次尝试是使用JSFIDLE添加jQuery和jQuery UI：

这不起作用。chrome控制台显示：

未捕获类型错误：无法读取未定义的$.widget的属性“safari”。_mouseDown@jquery ui.js:648（匿名函数）@jquery ui.js:582jQuery.event.dispatch@jquery compat git.js:4894jQuery.event.add.elemData.handle@jquery compat git.js:4551 67jquery ui.js:656

未捕获的TypeError:无法读取未定义的属性“msie”

但如果我手动包含这些资源：

• http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css

• http://code.jquery.com/jquery-2.1.3.min.js

• http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

---

这个问题在这里得到了诊断和解决：谢谢@BenRondeau，但正如我在自己的回答中所看到的，这是一个棘手的问题。。。不是jQuery（你提供的链接与我写的非常接近）@Stewartside：完整的工作代码在问题中。只有外部资源的引用发生了更改（使用JSFIDLE UI，而不是使用标记），这就是为什么我没有从question@Stewartside你说得对。我用更多的细节更新了答案

(function ($) {
    $(function () {
        $(".editor")
            .wrap("<div class='resizable'></div>'")
            .parent()
            .append("<hr class='resizer ui-resizable-s'/>");    

        $(".resizable").resizable({
            handles: {
                s: $(".resizer").get()
            }
        });
    });
})(jQuery);