jQuery函数在调整窗口大小之前不会触发

Question

我有一个Foundation Orbit图像滑块，直到调整浏览器窗口大小时才显示。该空间是空的，直到你甚至改变一个像素的窗口大小。 Foundation正在计算飞行中的滑块的高度，但是当页面第一次加载时，容器上没有设置高度。

我也有一个导航栏，它不会自行修正其计算的宽度，直到我调整窗口的大小。

这里的导航栏代码：

Ew.ApplicationView = Ember.View.extend({ 
    didInsertElement: function() { 
    $(".nav").width($(window).width() - 406); 
    $(".subnav").width($(window).width() - 396); 
    return $(window).resize(function() { 
     $(".nav").width($(window).width() - 406); 
     return $(".subnav").width($(window).width() - 396); 
    }); 
    } 
}); 

与滑块的初始化代码：

Ew.OrbitSliderComponent = Ember.Component.extend({ 
    initOrbit: function() { 
    $(document).foundation('orbit', { 
     stack_on_small: true; 
     navigation_arrows: false; 
     variable_height: true; 
    }); 
    }.on('didInsertElement') 
}); 

是什么原因导致的jQuery功能不火，直到调整窗口大小？

Answer 1

我不完全理解为什么发生这种情况，但似乎它与大小.nav和.subnav权利这样做？我认为这些元素的初始大小发生得太早。 PLZ尝试以下操作：

Ew.ApplicationView = Ember.View.extend({ 
    didInsertElement: function() { 
    Ember.run.scheduleOnce('afterRender', this, function(){ 
     $(".nav").width($(window).width() - 406); 
     $(".subnav").width($(window).width() - 396); 
     return $(window).resize(function() { 
     $(".nav").width($(window).width() - 406); 
     return $(".subnav").width($(window).width() - 396); 
     }); 
    } 

    } 
}); 

这使得你的逻辑运行之后的所有渲染的东西已经被灰烬执行。其实didInsertElement只是保证在给定视图的根元素存在时执行。孩子的元素或孩子的观点不必在那里！看看我的blog的解释和更优雅的方法来避免代码中的这种不美观的嵌套。

Answer 2

难道是说，部分：

return $(window).resize(function() { 

什么，而不是$（窗口）.resize如果是的$（document）.load？

从jQuery的文档：

/*The load event is sent to an element when it and all sub-elements have been 
completely loaded. This event can be sent to any element associated with a 
URL: images, scripts, frames, iframes, and the window object.*/ 

Answer 3

一个简单的技巧会被重复链的.resize()功能：

return $(window).resize(function() { 
    $(".nav").width($(window).width() - 406); 
    return $(".subnav").width($(window).width() - 396); 
}).resize(); // Resize() onload 

你可以看到之间的差异，而不链接（http://jsfiddle.net/teddyrised/2x42Q/2/），并用虽然链接（http://jsfiddle.net/teddyrised/2x42Q/1）