jquery - 如果在运行时创建，可调整大小的句柄将不起作用

Question

尝试实现通过外部元素调整内部元素大小的简单功能。

如果通过 js 创建元素和自定义句柄，JQuery 可调整大小的句柄将不起作用。下面是js代码。

var resizable_handles_html = '[div sructure]'; //editor ommiting codes :)

$(function(){
  $("#clickMe").click(function(){
    $("[tried to put div here]")   //editor ommiting codes :)
      .css({
        'background':'white',
        'width':'100px',
        'height':'100px',
        'border':'dotted 1px #000',
        'position':'relative'
      })
      .append(resizable_handles_html)
      .draggable()
      //.resizable({handles: "n, e, s, w, ne, se, sw, nw"})
      .resizable({
        handles: {
          'nw': '.nwgrip',
          'ne': '.negrip',
          'sw': '.swgrip',
          'se': '.segrip',
          'n': '.ngrip',
          'e': '.egrip',
          's': '.sgrip',
          'w': '.wgrip'
        }
      })
      .append(
        $("[tried to put div here]")   //editor ommiting codes :)
          .attr({
            id:'text',
            contenteditable:'true'
          })
          .css({
            'background':'blue',
            'width':'auto',
            'height':'auto',
            'border':'dotted 1px #000',
            '-moz-border-radius': '15px',
            '-webkit-border-radius': '15px',
            'border-radius': '15px',
            '-khtml-border-radius': '15px'
          })
      )
      .appendTo('body');
  });
})

尝试粘贴变量“ressized_handles_html”的内容，但仅显示引号。

现在正在创建元素，但抛出错误

"Uncaught TypeError: Cannot read property 'ownerDocument' of undefined" on click of that element."

对于可拖动来说，这肯定不会发生。创建了一个 fiddle http://jsfiddle.net/keshabdey/7m8GF/5/

任何帮助将不胜感激。

Answer 1

更新了 fiddle ，似乎可以工作:

修复了标记，句柄具有多个类属性

var resizable_handles_html = '<div class="ui-resizable-handle ui-resizable-nw nwgrip">    </div>'+
'<div class="ui-resizable-handle ui-resizable-ne negrip"></div>'+
'<div class="ui-resizable-handle ui-resizable-sw swgrip"></div>'+
'<div class="ui-resizable-handle ui-resizable-se segrip"></div>'+
'<div class="ui-resizable-handle ui-resizable-n ngrip"></div>'+
'<div class="ui-resizable-handle ui-resizable-s sgrip"></div>'
'<div class="ui-resizable-handle ui-resizable-e egrip"></div>'+
'<div class="ui-resizable-handle ui-resizable-w wgrip"></div>';

也使用默认的.res定大小构造函数

http://jsfiddle.net/7m8GF/8/