如何在通过 AJAX 插入内容后获取元素的高度
how to get the height of an element after inserting content via AJAX?
我有一个Jquery Mobile页面,我正在通过AJAX加载一个表单。我正在使用一个插件设置页面尺寸,该插件在 Ajax 运行并更新布局后计算尺寸(至少以下控制台之后出现)。
我需要获得接收内容的元素的高度,但无论我尝试什么,我都只是垃圾(~169px而不是一些1200px)
这是我的代码:
(inside plugin)
some: function(){
var self = this,
o = self.options,
wrap = $('div:jqmData(wrapper="true").ui-page-active').last(),
// elements
panels = wrap.find('.ui-panel.ui-panel-active').filter(':not(.ui-popover)'),
pages = panels.find('.ui-page'),
contents = pages.find('.ui-content');
// maxHeight contents
for ( var i = 0; i < contents.length; i++){
ct = contents.eq(i);
console.log( ct );
console.log( ct.css("height") )
console.log( ct.height() );
console.log( ct.outerHeight() );
// max
if ( ct.css("height") > parseFloat( o._iPadFixHeight ) ){
o._iPadFixHeight = parseFloat( ct.css("height") ) + parseFloat( ct.css('padding-top')) + parseFloat( ct.css('padding-bottom')) ;
};
}
...
如果我没有使用任何 AJAX,这可以正常工作。如果我通过 AJAX 动态添加内容,控制台会在 AJAX 之后触发,但仍然只返回 false 值。
问题:
如何在 AJAX 更新后可靠地获取内容元素高度?我尝试在 Ajax 之后设置 10 秒超时,以等待一切就绪。没有区别,10秒后内容元素高度仍然不正确。
感谢您的帮助!
编辑:
虽然控制台在 AJAX 加载后记录,但我认为该函数在之前触发,因此它基于 AJAX 之前的维度进行计算。我正在考虑使用这个重新开火:
$(window).on('dimensionchange', function(){
self.ome();
})
和触发
$(window).trigger('dimensionchange')
在我的 AJAX 成功处理程序中。不完美,但我想这会做。
编辑2:
让它工作。@HolgerDSchauf是对的。在第一次函数运行时,我设置了 false 值,然后在 AJAX 出现后,仍然设置了 false 值。我现在像这样修复它:
阿贾克斯成功:
...
// cleanup dimensions
$(window).trigger( 'dimensionclear');
...
window.setTimeout(function() {
target.removeClass('.fade.in');
// recalculate
$(window).trigger('dimensionchange');
},250);
在我的插件中:
$(window).on('dimensionchange', function(){
self.ome();
});
$(window).on('dimensionclear', function(){
self.ome("clear");
});
在 OME 函数中:
// cleanup
if ( from == "clear") {
contents.css({'height':'', 'max-height':''})
return;
}
就像一个魅力。
我使用这个函数来保持所有div 的更新大小。使用这样的东西,但不要忘记在文档准备就绪时调用它。
function framing() {
/*
Pre : ready.js, self
Post : design.js->framing
Author : Enes Ü.
Date : 15:30, 05 May 12
Summary : framing the page widthly/heightly
Bugs/TODOs : Frame heights are anormal and will be fixed. Prior=5
*/
$("#right_menu").width($("#main").width()-$("#left_menu").width());
$("#left_menu").height(getWinHeight());
$("#top_menu").width($("#main").width()-$("#left_menu").width());
$("#right_menu").height(getWinHeight()-$("#top_menu").height());
$("#map_container").height(getWinHeight());
/*
******* lots of lines like above...
*/
setTimeout(framing,100);
}
您使用了带有"wrap,panel,ct"的缓存元素 刷新此缓存变量或立即使用它
相关文章:
- 如何在jQuery中获取元素的形式
- 通过id和class属性获取元素
- Javascript:Can't使用getElementById获取元素
- 使用jquery.html()获取元素本身的html
- 如何从iframe内部获取元素
- Javascript函数获取元素内容
- 使用模板后,使用Angular获取元素属性值
- 获取元素类名的部分
- 从JSON.parse获取元素
- 获取元素内部的缩写
- 在不引用文档的情况下使用AngularJS获取元素
- 如何获取元素's的title属性
- 使用Javascript,获取元素的方法是什么,基于打开和关闭标记之间的文本
- Javascript获取元素背景图像,但消除了“;url()”;
- Javascript:按类获取元素,但跳过某个类
- 当display:none时,getElementById()无法获取元素
- 我的ID获取元素不起作用
- 如何获取元素:使用javascript和CORS悬停背景
- 能够获取元素长度,但不能获取内部 HTML
- 如何使用jQuery在模板kendo UI中获取元素类