5

我有一个 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 之后触发，但仍然只返回错误值。

问题：
如何在 AJAX 更新后可靠地获取内容元素高度？我尝试在 Ajax 之后设置 10 秒超时，以等待一切就绪。没有区别，10 秒后内容元素的高度仍然不正确。

感谢帮助！

编辑：
虽然控制台在 AJAX 加载后记录，但我认为该函数之前已触发，因此它是根据前 AJAX 尺寸计算的。我正在考虑重新使用这个：

$(window).on('dimensionchange', function(){             
    self.ome();
    })

并触发

$(window).trigger('dimensionchange')

在我的 AJAX 成功处理程序中。不完美，但我想这会做。

EDIT2：
让它工作。@HolgerDSchauf 是正确的。在我第一次运行函数时，我设置了错误值，然后在 AJAX 进入后，仍然设置了错误值。我现在像这样修复它：

阿贾克斯成功：

...
// 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;
   }

奇迹般有效。

4

2 回答 2

2

我使用这个函数来保持我所有的 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);
}
于 2012-06-20T11:33:26.607 回答
1

您使用带有“wrap, panel, ct”的缓存元素刷新此缓存变量或立即使用它

于 2012-06-20T11:26:03.100 回答