Question

我正在尝试在以下函数上激活resize事件：

$(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>');
  } 
});

我想为它添加一个调整大小的侦听器。根据{{3}}我将第一行更改为$(window).resize(function()，但整个功能停止工作。

我做错了什么？感谢。

更新：基于这个Paul Irish http://api.jquery.com/resize/我将smartresize添加到我的plugins.js。我将函数调用从$(function()更改为$(window).smartresize(function()并且它已停止工作。将其更改回$(function()并再次有效。为什么我不能向这个吸盘添加任何类型的resize事件监听器？： - ）

Answer 1

这里要理解的关键点是$(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() {})，那么它将无法正常工作，因为该文档尚未准备就绪，也不准备添加任何事件侦听器。

似乎无法使用jquery resize事件来处理Modernizr媒体查询功能

1 个答案: