附加 jQuery 的可调整大小的处理程序

Question

看到这个 jSFiddle。

我正在尝试附加处理程序以调整大小 $('oWrapper_'+num)。但它不会调整大小。原因是因为 $('#oWrapper_'+num) 在执行时还没有添加到 dom，所以选择器不会 return 任何元素。

如何调整 $('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,
        });

Answer 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 类干扰了 jQuery-UI 的类，它们是在调用 .resizable() 时添加的。

此外，我将 .resizable() 调用移到了代码块的末尾，以确保该元素在调用之前出现在 DOM 中。

如果这不是您想要的，或者我误解了什么，请告诉我，我会进行必要的更改。谢谢！

附加 jQuery 的可调整大小的处理程序

Attach jQuery's resizable handlers

html

javascript

css

jquery

jquery-ui