似乎无法让 jquery resize 事件在 Modernizr 媒体查询功能上工作

我正在尝试激活以下函数的调整大小事件：

$(function() {
if (Modernizr.mq('only screen and (min-width: 1140px)')) {
$('div#ss1').html('<div>[snip]</div>');
$('div#ss1').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
  } 
if (Modernizr.mq('only screen and (max-width: 1139px)')) {
$('div#ss2').html('<div>[snip]</div>');
$('div#ss2').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
  } 
});

我想为其添加一个调整大小侦听器。基于http://api.jquery.com/resize/ http://api.jquery.com/resize/我将第一行更改为$(window).resize(function()但随后整个功能停止工作。

我究竟做错了什么？谢谢。

更新：基于保罗·爱尔兰post http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/我将 smartresize 添加到我的 plugins.js 中。我改变了函数调用$(function() to $(window).smartresize(function()它停止工作了。将其改回$(function()它又起作用了。为什么我不能向这个傻瓜添加任何类型的调整大小事件侦听器？ :-)

这里要理解的关键点是$(function() {})是在做。在文档准备好之前，其中的代码不会执行。将代码放入其中相当于将代码放入其中：

$(document).ready(function () { 
    //here 
})

您想将调整大小事件放在$(function() {})， 像这样：

function checkMq() {
    if (Modernizr.mq('only screen and (min-width: 1140px)')) {
        $('div#ss1').html('<div>[snip]</div>');
        $('div#ss1').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
    } 
    if (Modernizr.mq('only screen and (max-width: 1139px)')) {
        $('div#ss2').html('<div>[snip]</div>');
        $('div#ss2').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
    } 
}

$(function() {
    // the call to checkMq here will execute after the document has loaded
    checkMq();

    $(window).resize(function() {
        // the call to checkMq here will execute every time the window is resized
        checkMq();
    });

    // you can add other listeners here click, hover, etc.  
});

如果你刚好有$(window).resize(function() {})不使用$(function() {})，它不会工作，因为该文档尚未准备好进行处理，也未准备好添加任何事件侦听器。