附加jQuery's可调整大小的处理程序
Attach jQuery's resizable handlers
请参阅此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,
});
请看看这个小提琴,看看它是否能解决你的问题。
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中。
如果这不是你想要的,或者我误解了什么,请告诉我,我会做出必要的改变。谢谢
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在AJAX回调和呈现PIXIJS之间处理程序流时遇到了问题
- Adobe Edge:动画完成时添加onComplete处理程序
- 是否可以从输入处理程序中确定输入的类型
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 平均值.on(事件[,选择器][,数据],处理程序)
- getSript在同一对象上多次添加处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何让React JS点击处理程序在执行时更新DOM
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- Backbone listenTo不将jquery函数作为处理程序进行激发
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数