Нечетная ошибка JavaScript (с использованием jQuery)

Question

У меня есть код, который захватывает нажатие кнопок, а затем пропадает фактическое содержимое и отображает содержимое выбранного элемента. У меня он работает вместе с другими файлами в файле init.js, который у меня есть:

$(function() {
    $('#contacto').fancybox({
        'hideOnContentClick': false,
        'frameWidth': 600,
        'frameHeight': 550,
        'centerOnScroll': true
    });


        $('ul.drawers').accordion({
            header: 'H2.drawer-handle',
            selectedClass: 'open',
            event: 'mouseover'
        });

        $("#about-button").css({ opacity: 0.3  });
        $("#contact-button").css({ opacity: 0.3 });
        $("#page-wrap div.button").click(function(){
            clicked = $(this);
            console.log(clicked);
            // if the button is not already "transformed" AND is not animated
            if ((clicked.css("opacity") != "1") && (clicked.is(":not(animated)"))) {
                clicked.animate({
                    opacity: 1,
                    borderWidth: 5
                }, 600 );
                // each button div MUST have a "xx-button" and the target div must have an id "xx" 
                var idToLoad = clicked.attr("id").split('-');
                //we search trough the content for the visible div and we fade it out
                $("#menu-content").find("div:visible").fadeOut("fast", function(){
                    //once the fade out is completed, we start to fade in the right div
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                })
            }
            //we reset the other buttons to default style
            clicked.siblings(".button").animate({
                opacity: 0.5,
                borderWidth: 1
            }, 600 );
        });
    });

, но только 2-й $ (function () - это тот, который выполняется во время этого события. HTML-код, который отвечает на это:

<div id="page-wrap"> 
            <div id="festival-button" class="button">
                <h2 class="header-ultimo-festival">&Uacute;timo Festival</h2>
            </div>
            <div id="cursos-button" class="button">
                <h2 class="header-cursos">Cursos del A&ntilde;o</h2>
            </div>
            <div id="viajes-button" class="button">
                <h2 class="header-viajes">Viajes del A&ntilde;o</h2>
            </div>

            <div class="clear"></div>

            <div id="menu-content"> 
                <div id="festival">
                    <p>
                        <a href="assets/img/varias/album/festival/plant1.jpg" title="Imagen 1" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant1_t.jpg" alt="Imagen 1" />
                        </a> 
                        <a href="assets/img/varias/album/festival/plant2.jpg" title="Imagen 2" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant2_t.jpg" alt="Imagen 2" />
                        </a> 
                        <a href="assets/img/varias/album/festival/plant3.jpg" title="Imagen 3" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant3_t.jpg" alt="Imagen 3" />
                        </a> 
                        <a href="assets/img/varias/album/festival/plant4.jpg" title="Imagen 4" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant4_t.jpg" alt="Imagen 4" />
                        </a>
                    </p>
                </div>

                <div id="cursos">
                    <p>Im&aacute;genes de Cursos aqu&iacute;</p>
                </div>

                <div id="viajes">
                    <p>Im&aacute;genes de Viajes aqu&iacute;</p>   
                </div>
            </div>
        </div>
    </div>

Проблема в том, что, когда кто-то нажимает на ссылку из моего меню и активирует эффект "fancybox", а затем пытается щелкнуть по элементу, связанному со вторым событием $ (function (), я получаю эту ошибку:

$ clicked.css не является функцией (?) () () album.html (строка 24) ready () () jquery.min.js (строка 26) trigger () () jquery.min.js (строка 25) [Перерыв на эту ошибку], если (($ clicked.css ("opacity")! = "1") && ($ clicked.is (": not (animated)"))) {

Но я до сих пор не знаю, почему ... Я пытался это исправить, но не могу, потому что, по мне, у меня правильный синтаксис = /

---

Редактировать 2 ответа

Я сделал то, что было предложено, если я щелкну по нему перед вызовом эффекта «fancybox», я получаю в окне оповещения [объектный объект], после чего я получаю [объектный HTMLDivElement] и ту же ошибку…

---

Редактировать

С помощью firebug и console.log (); Я кое-что заметил, если я нажму перед вызовом «fancybox», я вернусь:

Object 0=div#cursos-button.button length=1 jquery=1.2.6

Но после вызова я получаю:

<div id="cursos-button" class="button" style="border-width: 1px; opacity: 0.5;">

Теперь пытаюсь понять, почему ...

---

Редактировать

Я до сих пор не знаю, почему это происходит, но я исправил это с помощью jQuery.noConflict (); в любом случае, если кто-то знает, почему это произошло, я был бы признателен, если бы вы сказали мне =)

Answer 1

Я не понимаю цель твоих 2

$(function () {
...

, которые появляются внутри вашего обработчика документов. Эта идиома является сокращением для

$(document).ready(function () {
...

Итак - вы действительно хотите заключить больше обработчиков, готовых к документам, в ваш обработчик внешних готовых документов?

PS: присвоение имени переменной javascript с префиксом $ совершенно допустимо, НЕ будет путать jQuery и фактически рекомендуется для хранения объектов jQuery

Answer 2

Для начала:

1 - попробуйте поместить две анонимные функции в $ (document) .ready ()

2 - избавьтесь от префикса $ в переменной $ clicked, что может сбить с толку jQuery - но прежде чем изменить префикс, сделайте предупреждение ($ clicked) после этой строки:

$clicked = $(this);
alert($clicked); //to see if it's an object or null

Дайте нам знать, что происходит