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 。