4

我正在尝试在以下功能上激活调整大小事件：

$(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/我将第一行更改为$(window).resize(function()但随后整个函数停止工作。

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

更新：根据 Paul Irish 的这篇文章，我将 smartresize 添加到我的 plugins.js 中。我将函数调用从更改$(function()为$(window).smartresize(function()，它停止工作。将其改回$(function()并再次起作用。为什么我不能向这个傻瓜添加任何类型的调整大小事件侦听器？:-)

4

1 回答 1

9

这里要理解的关键点$(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() {})没有 using $(function() {})，它将无法工作，因为该文档还没有准备好处理，也没有准备好添加任何事件侦听器。

于 2013-05-01T06:56:56.260 回答