使用jQuery可调整大小的处理程序附加并调整div大小

Question

我试图附加处理程序来调整$('oWrapper_'+num)。但它不会调整大小。如果这个问题是因为处理程序连接到错误的div，我不是这样吗？

我需要的是能够将处理器连接到$('oWrapper_'+num)，并能够使用处理程序来调整。

num++ 
    var cloudWrap = $('<div />', { id: 'cloudWrap_'+num}), 
     outerWrap = $('<div />').appendTo(cloudWrap) 

     outerWrap.append(
      $('<div />', { class: 'tf', id: 'oWrapper_'+num, style: 'white-space:pre-line; font-size: 2vw;' }), 
      $('<div />', { class: 'ui-resizable-handle ui-resizable-ne hndl' }), 
      $('<div />', { class: 'ui-resizable-handle ui-resizable-se hndl' }), 
      $('<div />', { class: 'ui-resizable-handle ui-resizable-sw hndl' }), 
      $('<div />', { class: 'ui-resizable-handle ui-resizable-nw hndl' }) 
     ); 


     jQuery('#oWrapper_'+num).resizable({ 
      handles: { 
      'ne': '.ui-resizable-ne', 
      'se': '.ui-resizable-se', 
      'sw': '.ui-resizable-sw', 
      'nw': '.ui-resizable-nw' 
      }, 
      aspectRatio: 16/9, 
     }); 

编辑：

outerWrap.resizable({ 
       handles: { 
       'ne': '.ui-resizable-ne', 
       'se': '.ui-resizable-se', 
       'sw': '.ui-resizable-sw', 
       'nw': '.ui-resizable-nw' 
       }, 
       aspectRatio: 16/9, 
      create: function(event, ui) { 
       initDiagonal = getContentDiagonal(); 
       initFontSize = parseInt($("#oWrapper_"+num).css("font-size")); 
      }, 
      resize: function(e, ui) { 
       var newDiagonal = getContentDiagonal(); 
       var ratio = newDiagonal/initDiagonal; 

       $("#oWrapper_"+num).css("font-size", (initFontSize/100) + (ratio/(initFontSize/1000)) + "vw"); 
      } 
     }); 

function getContentDiagonal() { 
    var contentWidth = $("#oWrapper_"+CretCount).width(); 
    var contentHeight = $("#oWrapper_"+CretCount).height(); 
    return contentWidth * contentWidth + contentHeight * contentHeight; 
} 

Answer 1

的问题是你的ID选择jQuery('#oWrapper_'+num)，时执行新的元素还没有被添加到DOM，所以选择不会因此返回任何元素resizable处理程序将不会被初始化。

在你的情况，可变cloudWrap指新创建的元素，所以你可以用它来初始化窗口小部件。

num++; 
var cloudWrap = $('<div />', { id: 'cloudWrap_'+num}), 
    outerWrap = $('<div />').appendTo(cloudWrap) 

outerWrap.append(
    $('<div />', { class: 'tf', id: 'oWrapper_'+num, style: 'white-space:pre-line; font-size: 2vw;' }), 
    $('<div />', { class: 'ui-resizable-handle ui-resizable-ne hndl' }), 
    $('<div />', { class: 'ui-resizable-handle ui-resizable-se hndl' }), 
    $('<div />', { class: 'ui-resizable-handle ui-resizable-sw hndl' }), 
    $('<div />', { class: 'ui-resizable-handle ui-resizable-nw hndl' }) 
); 


cloudWrap.resizable({ 
    handles: { 
     'ne': '.ui-resizable-ne', 
     'se': '.ui-resizable-se', 
     'sw': '.ui-resizable-sw', 
     'nw': '.ui-resizable-nw' 
    }, 
    aspectRatio: 16/9, 
});