请参阅此jSFiddle。
我正在尝试附加处理程序以调整$('oWrapper_'+num)
的大小。但它没有调整大小。原因是因为$('#oWrapper_'+num)
在执行此操作时尚未添加到dom中,因此选择器不会返回任何元素。
如何调整$('oWrapper_'+num)
的大小,而不是调整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' })
);
jQuery('#oWrapper_'+num).resizable({
handles: {
'ne': '.ui-resizable-ne',
'se': '.ui-resizable-se',
'sw': '.ui-resizable-sw',
'nw': '.ui-resizable-nw'
},
aspectRatio: 16 / 9,
});
答案 0 :(得分:1)
请查看此fiddle,看看这是否能解决您的问题。
var num = 0;
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;' })
);
cloudWrap.appendTo('body');
$("#oWrapper_" + num).resizable({
handles: 'ne, se, sw, nw',
aspectRatio: true,
});
您的自定义css类干扰了调用.resizable()
时添加的jQuery-UI类。
此外,我将.resizable()
调用移到了代码块的末尾,以确保在调用之前元素存在于DOM中。
如果这不是你想要的,或者我误解了什么,请告诉我,我会做出必要的修改。谢谢!