Question

我有和index.html一起加载jQuery和外部javascript（functions.js）文件。但外部js文件中的函数将无法正常工作。我可以在chrome dev工具的资源选项卡中看到jQuery和functions.js文件加载。此外，如果我将我的功能剪切并粘贴到控制台，它就可以工作。请帮忙。

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

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

HTML下面

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

更新：没有错误信息显示，chrome dev工具，firebug和jsFiddle说事情很好。当我说它不起作用时我的意思是脚本加载，没有错误消息，但当我点击'#topNavShare'时，show（）事件不会触发。

可点击元素是一个空div，其高度，宽度和背景图像在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;
}

希望这很有帮助。对不起，如果这看起来很疯狂，我一直在看这个看似简单的问题，我有一个快速接近的截止日期。

Answer 1

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

应该是

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

外部JavaScript注册

1 个答案: