ошибка JQuery не может вызвать метод «» нуль

Question

Я пытаюсь реализовать этот метод: http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/

с липким заголовком на моем сайте http://storkbox.gopagoda.com/

Я хочу серое меню, чтобы быть липким, но Я получаю ошибку:

Uncaught TypeError: Cannot call method 'waypoint' of null 

на линии

$('.container').waypoint('sticky'); 

есть DIV с классом контейнера на странице, поэтому он никогда не должен быть пустым

Я не знаю, почему, мое единственное предположение, что это разница между JQuery 1.8.2 и 1.8.3 , но могу ли я запустить оба экземпляра одновременно (для липкого плагина требуется 1.8.3, а для остальных модулей требуется 1.8.2)

Answer 1

Одним из преимуществ быть старым является то, что моя первая мысль, когда я увидел ваше сообщение об ошибке, Хм ... Действительно ли функция $() действительно так думает? " :-)

Вы видите, функция $() jQuery никогда не возвращается null или undefined. Также нет jQuery(), если вы называете это под этим именем. Даже если вы дадите ему селектор, который не соответствует каким-либо элементам, он возвращает пустой объект jQuery —, похожий на [], пустой массив —, а не ничего.

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

Cannot call method 'waypoint' of null 

на эту строку кода:

$('.container').waypoint('sticky'); 

будет, если $ является не функция JQuery. Потому что это то, что говорит эта ошибка: вы пытаетесь позвонить null.waypoint(). Единственный способ, который может произойти, - это позвонить $('.container')null.

И действительно, это так: вы загружаете как jQuery, так и Prototype.js, и в тот момент, когда вы нажимаете на ошибку, вы вызываете версию прототипа функции $.

Здесь попробуйте: Загрузите страницу в Chrome с помощью инструментов разработчика. Он должен остановиться на вызове .waypoint().

Теперь, нажмите Esc, чтобы открыть мини-консоль (или щелкните вкладку Console в верхней части инструментов разработчика) и введите это в консоли:

$ 

Он покажет:

function $(element) { 
    if (arguments.length > 1) { 
    for (var i = 0, elements = [], length = arguments.length; i < length; i++) 
     elements.push($(arguments[i])); 
    return elements; 
    } 
    if (Object.isString(element)) 
    element = document.getElementById(element); 
    return Element.extend(element); 
} 

Теперь напечатайте это:

jQuery 

и он будет отображать:

function (e,t){return new v.fn.init(e,t,n)} 

Определенно не такая же функция!

Или для простого теста, типа:

$ === jQuery 

и печатает:

false 

К сожалению.

Чтобы исправить это, вам, вероятно, понадобится использовать функцию jQuery noConflict(), чтобы вы могли одновременно использовать как jQuery, так и Prototype. Вот отличная рецензия по теме:

Avoiding Conflicts with Other Libraries

(Благодаря @acdcjunior для справки!)

Кстати, несколько версий JQuery не связаны с этим вопросом. Вам действительно нужно загружать как 1.8.2, так и 1.8.3? В чем разница между этими двумя причинами проблемы совместимости?