Question

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

如果通过js创建元素和自定义句柄，则JQuery resizable句柄无法正常工作。下面是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');
  });
})

尝试粘贴变量'resizable_handles_html'的内容，但仅显示引号。

现在元素已经创建但是抛出错误

“Uncaught TypeError：无法读取属性'ownerDocument'的未定义“点击该元素。”

对于可拖延的那些肯定没有发生。创建了一个小提琴 http://jsfiddle.net/keshabdey/7m8GF/5/

任何帮助将不胜感激。

Answer 1

更新小提琴，似乎有效：

固定标记，句柄有多个类属性

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

使用默认的.resizable构造函数

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

如果创建运行时，Resizable句柄不起作用

1 个答案: