Селектор $ (body) работает, но прерывает код (ошибка ссылки), а $ ("body") не показывает ошибку, но не работает

-1

У меня есть функция JS, которую мне нужно вызывать при изменении размера окна. Единственный способ я нашел, чтобы получить эту работу является использование:

$(body).on('resize', function(){ 
     myFunction(); 
    });

С этим туРипсЫоп() выполняется на окне изменения размера. Проблема в том, что я получаю опорную ошибку (тело не определено), поэтому остальная часть моего JS не выполняется должным образом.

Я пробовал разные селекторы: $ ("body"), $ ("document.body"), $ (окно), $ (документ), ... С ними я не получаю опорную ошибку, но функция не выполняется.

Вот, Что выглядит (минимальный вид) мой HTML:

<html> 
    <head> 
     <script src="jquery.js"></script> 
    </head> 
    <body> 
     [ Alot of things ...] 
     <script src="main.js"></script> 
    </body> 
</html>

Итак, JQuery включен в моей голове раздел, в то время как мой JS включен перед закрытием тега тела.

Теперь это то, что выглядит как мой файл main.js:

myFunction(){ 
    alert("Hello world"); 
} 

$(body).on('resize', function(){ 
    myFunction(); 
}); 

$(document).ready(function(){ 
    myFunction(); 
}

Функция работает должным образом на странице загрузки (с $ (документ) .ready), но мне это нужно для работы на каждой странице изменения размера. Я искал много, чтобы решить мою проблему, но я застрял. Прошу прощения, если ответ тривиален. Я любопытный noob с селекторами элементов JS и DOM.

Редактировать с помощью дополнительной информации: Эта функция используется для установки нескольких div на равную высоту. Вы можете найти его здесь Equal Height divs with jQuery. Моя группа div - это строки сетчатой системы skelJS.

Итак, первоначальная проблема заключалась в том, что когда я изменял размер своего окна, divs, где не изменялись, чтобы соответствовать чувствительному размеру шрифта, поэтому я получаю переполнение. Очевидно, я попытался вызвать эту функцию при изменении размера окна/тела, но я не могу заставить ее работать EXCEPT, если я использую селектор $ (body), который дает мне ссылочную ошибку, но тогда проблема переполнения исчезает и функция корректно работает при изменении размера .. Это действительно странно. Я пробовал все ваши решения, ничего не работает. Проблема должна быть BCAK. Если мы не получим рабочего решения, il вернется к вам с полным кодом позже сегодня. Спасибо

источник

2016-01-26 Math

'$ (window) .resize (myFunction)' должен работать. – Tushar

, потому что нет 'body' global. – epascarello

SideNote: '$ (body)' будет вызывать ошибку, если 'body' (_variable_) не определен. Если вы ссылаетесь на '', используйте '$ ('body')' или '$ (document.body)'. – Tushar

Вы должны быть прикреплением изменения размера к окну, а не к document.body.

(function() { 
 
    function resizeFnc() { 
 
     console.log("resized called"); 
 
    } 
 

 
    $(window).on("resize", resizeFnc); //calls it on resize 
 
    $(resizeFnc); //calls it on document ready 
 

 
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Причина $(body) не удается это не переменная "тело" объявлена. Причина, почему $("body") и $(document.body) fail - это событие не срабатывает на корпусе, поэтому оно не вызывается.

И с кодом, который вы указали.

function equalHeight(group) { 
 
    console.log("I was called"); 
 
    tallest = 0; 
 
    group.each(function() { 
 
     thisHeight = $(this).height(); 
 
     if(thisHeight > tallest) { 
 
      tallest = thisHeight; 
 
     } 
 
    }); 
 
    group.height(tallest); 
 
} 
 
    
 
$(function(){ 
 
    equalHeight($(".EqHeightDiv")); 
 
}); 
 

 
$(window).on("resize", function(){ 
 
    console.log("resized called"); 
 
    equalHeight($(".EqHeightDiv")); 
 
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

что теперь сломана это скрипт, который вы используете. Вызывается изменение размера, он просто не устанавливает новую максимальную высоту. Так как заявленное изменение размера окна запускается, проблема была где-то в другом месте.

Итак, как мы это исправим?

var timer; 
 
function equalHeight(group) { 
 
    
 
    if (timer) window.clearTimeout(timer); //so this code is not called on every single resize 
 
    timer = window.setTimeout(function() { 
 
     var tallest = 0; 
 
     group.height(""); //reset the heights 
 
     group.each(function() { 
 
      thisHeight = $(this).height(); 
 
      if(thisHeight > tallest) { 
 
       tallest = thisHeight; 
 
      } 
 
     }); 
 
     group.height(tallest); 
 
    }, 10); 
 
} 
 
    
 
$(function(){ 
 
    equalHeight($(".EqHeightDiv")); 
 
}); 
 

 
$(window).on("resize", function(){ 
 
    equalHeight($(".EqHeightDiv")); 
 
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div> 
 
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

источник

2016-01-26 05:35:42 epascarello

OP сказал, что он уже использовал '$ (window)', и это не сработало, можете ли вы объяснить, почему. _I пробовал разные селекторы: '$ (" body ")', '$ (" document.body ")', '$ (window)', '$ (document)', ... С ними я не получаю опорную ошибку, но функция не выполнена._ – Tushar

Не видя, что они сделали с полным кодом, я не знаю, почему это волшебно не вызвало. Вышеприведенный код должен работать и изменять его, чтобы его можно было запустить, чтобы доказать, что он работает. – epascarello

Это решило мою проблему! Большое спасибо ! Я просто добавлю, если кто-то столкнется с одной и той же проблемой (равносильно с сеткой сетки skeljs): мне не нужно было использовать ваш css или класс EqHeightDiv, так как позиционирование обрабатывается skelJS. Но я знаю, что требуется, чтобы фрагмент кода был полностью понятным :) – Math

Попробуйте это. Окно представляет собой глобальный объект и не должен иметь какую-либо ссылки ошибки

function myFunction(){ 
     alert("Hello world"); 
    } 



$(window).resize(function() { 
    myFunction(); 
});

источник

2016-01-26 05:35:32 geckob

$(document).ready(function(){ $(window).on('resize', function(){ myFunction(); }); });

Здесь в действии: https://jsfiddle.net/6t987c28/

источник

2016-01-26 05:38:07

Если вы хотите добавить или изменить класс <body>, то это должно быть сделано в вашем вместо изменения размера jQuery:

$(window).on('resize', function() { 
    myFunction(); 
}); 

function myFunction() { 
    $('body').css('background', 'green'); 
    // or 
    $('body').addClass('selector-name'); 
}

источник

2016-01-26 05:42:50 Wawan

Селектор $ (body) работает, но прерывает код (ошибка ссылки), а $ ("body") не показывает ошибку, но не работает

ответ

Смежные вопросы