Question

I have and index.html with jQuery loading and an external javascript(functions.js) file loading. But the functions inside the external js file won’t work. I can see both jQuery and the functions.js file loading in the resources tab on the chrome dev tools. Also if i cut and paste my function into the console it works. Please help.

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

function topMenuShare(){
$('#topNavShare').click(function(){
    $('#shareMenu').show();
});
}

HTML below

<script type="text/javascript" src='js/jquery1.6.2.min.js'></script>
<script type='type/javascript' src='js/functions.js'></script>

UPDATE:
There are no error messages display, chrome dev tools, firebug and jsFiddle say things are fine. When I say it doesn’t work I mean the scripts load, no error messages, but when i click ‘#topNavShare’ the show() event does not fire.

The clickable element is a empty div with a height, width and background-image defined in CSS.

        <div id="topNav">
            <div id="topNavLogin" class="topNavButtons">
            </div>
            <div id="topNavShare" class="topNavButtons">
                <div id='shareMenu'>
                    <div id='shareMenuEmail' class='shareMenuitem'>
                    </div>
                    <div id='shareMenuFacebook' class='shareMenuitem'>
                    </div>
                    <div id='shareMenuTwitter' class='shareMenuitem'>
                    </div>
                    <div id='shareMenuGooglePlus' class='shareMenuitem'>
                    </div>
                </div>
            </div>
            <div id="topNavLiveChat" class="topNavButtons">
            </div>
            <div id="topnavSearch" class="topNavButtons">
            </div>
        </div>

CSS…

#topNav{
position: absolute;
width: 400px;
height: 25px;
top: 0px;
right: 15px;
}
.topNavButtons{
height: 25px;
float: left;
margin-right: 5px;
}
#topNavShare{
width: 60px;
height: 25px;
background-image: url('http://localhost:8888/assets/hpSprites.png');
background-position: -63px -41px;
}
#topNavShare:hover{
background-position: -63px -11px;
}

Hopefully this is helpful. Sorry if this seems frantic, i’ve been looking at this seemingly simple problem for a while and i have a fast approaching deadline.

Answer 1

<script type='type/javascript' src='test.js'></script>

should be

<script type="text/javascript" src="test.js"></script>