jQuery干扰了javascript

Question

我正在为客户建立一个站点，并且正在使用预构建主题作为起点。 它带有一个js文件，该文件具有针对移动导航的点击功能，一切工作正常，但是当我为jQuery添加脚本标签时，移动导航中断了，并且控制台出现此错误： Uncaught TypeError: Cannot set property 'onclick' of null如何解决此问题？ 导致错误的js行是document.getElementById('mobile-navigation').onclick = function(){我尝试更改该行以使用jQuery选择元素，但这只是在js文件中进一步导致了另一个错误。 我怎样才能解决这个问题？

在html中：

<div id="navigation">
    <span id="mobile-navigation">&nbsp;</span>
    <h1 class="nav-h1"><a href="index.html" class="logo"><!-- <img src="images/logo.png" alt=""> -->Header</a></h1>
    <ul id="menu">
        <li class="selected navList">
            <a ui-sref="home">Home</a>
        </li>
        <li class="navList">
            <a href="about.html">About</a>
        </li>
        <li class="navList">
            <a ui-sref="find">Find a Vendor</a>
            <!-- <ul>
                <li>
                    <a href="runningsinglepost.html">Running single post</a>
                </li>
            </ul> -->
        </li>
        <!-- <li>
            <a href="blog.html">Blog</a>
            <ul>
                <li>
                    <a href="blogsinglepost.html">blog single post</a>
                </li>
            </ul>
        </li> -->
        <li class="navList">
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</div>

js：

window.onload = function(){
            var getNavi = document.getElementById('menu');
            document.getElementById('mobile-navigation').onclick = function(){
                var a = getNavi.getAttribute('style');
                if(a){
                    getNavi.removeAttribute('style');
                    document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
                } else {
                    getNavi.style.display='block';
                    document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
                }
            };
            var getElm = getNavi.getElementsByTagName("LI");
            for(var i=0;i<getElm.length;i++){
                if(getElm[i].children.length>1){
                    var smenu = document.createElement("span");
                    smenu.setAttribute("class","mobile-submenu");
                    smenu.setAttribute("OnClick","submenu("+i+")");
                    getElm[i].appendChild(smenu);
                };
            };
            submenu = function (i){
                var sub = getElm[i].children[1];
                var b = sub.getAttribute('style');
                if(b){
                    sub.removeAttribute('style');
                    getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.png)';
                    getElm[i].lastChild.style.backgroundColor='rgba(255, 255, 255, 0.8)';
                } else {
                    sub.style.display='block';
                    getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.png)';
                    getElm[i].lastChild.style.backgroundColor='rgba(248, 98, 130, 0.8)';
                }
            };
        };

jQuery脚本标签：

<script type="text/javascript" src="/libs/bower_components/jquery/dist/jquery.min.js"></script>

mobile.js脚本标签：

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

可能会有所帮助，请注意我正在按角度进行操作，并且导航栏已包含在索引中。

Answer 1

我会怀疑您的JavaScript在文档加载之前就已经在运行。 这意味着javascript无法找到对象，因为它尚不存在。 尝试使用document.onload而不是window.onload 。