JavaScript и DOM

Question

Я не могу понять такую ​​ситуацию:

У меня есть шаблон сайта и в шапке есть код:

$(document).ready(function () {
    $('#header').corner();
    ...
}

corner() - это просто функция jQuery-плагина.Но проблема в следующем:

("#header") is null
    $('#header').corner();

Работает на главной странице, а на другой (с тем же шаблоном) - не работает.

Чтобы увидеть все в действии, посмотрите на эта страница.Вы увидите округленный заголовок (синий верхний div), и в консоли Firebug не будет никаких ошибок.Теперь перейдите на эту страницу.Все тоже работает, но на этот раз это не главная страница (она все еще использует тот же файл шаблона).

И третья страница , там появляется ошибка, но все тот же шаблон.Что не так?

Answer 1

Проблема в том, что $ - глупое имя a для функции .

На третьей странице $ определяется jQuery и переопределяется Prototype. Вы получаете конфликты.

Начните с переписывания всего вашего jQuery, чтобы использовать jQuery вместо $ и позвоните noConflict.

Answer 2

Если вы введете в свой console:

$.toString();

, вы увидите, что какой-то сценарий где-то перезаписывает ярлык jQuery $.Это, скорее всего, причина этой ошибки.Чтобы решить эту проблему, создайте контекст оболочки для всего вашего кода:

(function( $ ) {
    $(document).ready() {
        $('#header')....
    });
}(jQuery));

Это будет гарантировать, что символ $ теперь ссылается на объект jQuery в контексте этой функции.

Answer 3

Хорошим решением является использование пространства имен для таких сценариев, чтобы избежать конфликтов имен, как уже упоминал Квентин.

Вы все еще можете использовать $, выполнив следующие действия:

(function($) {
  //your code goes here and can use $ as jQuery without interfering with Prototype
} (jQuery));

Этотаким образом, вам никогда не придется использовать $ напрямую, при этом вы можете выборочно использовать $.

Answer 4

Как уже упоминалось, у вас есть столкновение имен с Prototype.Самый простой способ исправить это:

jQuery(function($) {
    $('#header').corner();
    ...
});