Вызов внешней функции jQuery из div, используя ее идентификатор

#jquery

#jquery

Вопрос:

Я пытаюсь вызвать внешний файл jquery, который ссылается на функцию click по идентификатору div. Функция отлично работает при внедрении в HTML-страницу, однако я хочу, чтобы все мои js вызывались извне.

Вот внешние файлы js в теге my head:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript" src="js/popuptabs.js" charset="utf-8"></script>
  

Код jQuery в для popuptabs.js

     jQuery(function($) {

        var open = false;

        $('#footerSlideButton').click(function () {

            if(open === false) {

                $('#footerSlideContent').animate({ height: '300px' });

                $(this).css('backgroundPosition', 'bottom left');

                open = true;

            } else {

                $('#footerSlideContent').animate({ height: '0px' });

                $(this).css('backgroundPosition', 'top left');

                open = false;

            }

        });     

    });


        jQuery(function($) {

        var open = false;

        $('#footerSlideButton2').click(function () {

            if(open === false) {

                $('#footerSlideContent2').animate({ height: '300px' });

                $(this).css('backgroundPosition', 'bottom left');

                open = true;

            } else {

                $('#footerSlideContent2').animate({ height: '0px' });

                $(this).css('backgroundPosition', 'top left');

                open = false;

            }

        });     

    });


            jQuery(function($) {

        var open = false;

        $('#footerSlideButton3').click(function () {

            if(open === false) {

                $('#footerSlideContent3').animate({ height: '300px' });

                $(this).css('backgroundPosition', 'bottom left');

                open = true;

            } else {

                $('#footerSlideContent3').animate({ height: '0px' });

                $(this).css('backgroundPosition', 'top left');

                open = false;

            }

        });     

    });
  

Вот мой HTML-код с div, на который я ссылаюсь:

 <div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">
            <h3>Online Brochures</h3>
            <p>Coming Soon!</p>
        </div>
    </div>
</div>
  

Я пробовал это: <a href="JavaScript:popuptabs.click('footerSlideButton');"></a> в моем div безрезультатно. Я не уверен, какой правильный способ вызвать эту функцию.

Комментарии:

1. Я бы предложил упростить ваш пример кода и предоставить более подробную информацию о том, что на самом деле происходит.

2. Что именно здесь происходит не так?

3. Код отлично работает, когда я встраиваю его в HTML-страницу. Однако я хочу вызвать функцию click извне…

Ответ №1:

Почему бы просто не дать ссылку, по которой вы хотите вызвать функцию из id значения:

 <a id="someLinkId" href="#">Link Text.</a>
  

и скажите:

 $("#someLinkId").click(function () {
    $('#footerSlideButton').trigger('click');
});