Resizable handles not working if created runtime

Question

Trying to achieve a simple functionality of re sizing inner element through outer element.

JQuery resizable handles not working if element and custom handles are created through js. Below is the js code.

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');
  });
})

Tried to paste contents of variable 'resizable_handles_html', but showing only quotes.

Now element is getting created but throwing an error

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

It is not happening for draggable thats for sure. Created a fiddle http://jsfiddle.net/keshabdey/7m8GF/5/

Any help will be appreciated.

Answer 1

Updated fiddle, seems to work:

fixed markup, handles had multiple class attributes

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>';

used default .resizable constructor as well

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