設置使用javascript新onclick屬性不工作

我設立的網頁上，這樣，在一定的寬度，右邊滑動菜單將成爲從上到下滑動菜單。要做到這一點，我用JavaScript來改變按鈕的onclick屬性，但仍網頁堅持工作像以前一樣，用向左滑動效果的權利。我附上與菜單相關的代碼。設置使用javascript新onclick屬性不工作

HTML：

<div id="header"> 
    <header id="title"> 
     <h1>The Nest</h1> 
     <p id="para">The hostel where your journey should start</p> 
     <button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()"> 
      <span class="glyphicon glyphicon-list"></span> 
     </button> 
    </header> 
</div> 

<div id="sidebar"> 
    <a href="javascript:void(0)" id="close-btn" onclick="closeSide()">&times;</a> 
    <a href="#">Accomodations</a> 
    <a href="#">Services</a> 
    <a href="#">Merchandising</a> 
    <a href="#">About us</a> 
</div>

的JavaScript & jQuery的：

var main = function() { 


$(window).resize(function() { 

    var width = $(window).width(); 

    if (width < 1023) { 

     document.getElementById("para").innerHTML = "Barcellona fine stay"; 

     $("#menu-btn").click(function() { 
     $("#para").fadeOut("fast"); 
     $("#menu-btn").fadeOut("fast"); 
     }); 

     $("#close-btn").click(function() { 
     $("#para").fadeIn("slow"); 
     $("#menu-btn").fadeIn("slow"); 
     }); 
    }  

    else if (width > 1024) { 

     document.getElementById("para").innerHTML = "The hostel where your journey should start"; 

    } 

    else if (width < 380) { 

     document.getElementById("menu-btn").onclick = function() { openTop(); }; 
     document.getElementById("close-btn").onclick = function() { closeTop(); }; 

     $("#menu-btn").click(function() { 
     $("#header").fadeOut("fast"); 
     }); 

     $("#close-btn").click(function() { 
     $("#header").fadeIn("slow"); 
     }); 

    }  

    return true; 

}); 

} 

$(document).ready(main);

我剛剛加入整個if/else語句，因爲它似乎整個最後的「否則，如果」它不工作

來源

2016-12-17 Dema

爲什麼不檢查寬度事件處理程序中，而不是試圖取代它們 – adeneo

爲什麼你混合使用'getElementById'和東西... jQuery的語法？ – trincot

我會建議刪除內聯事件在你的HTML處理，並在您的JS文件的事件處理程序做的一切，如果你真的想保持的onclick在HTML中，執行該函數的一切，但我不建議對那。內聯事件處理有時會導致怪異的錯誤。 [點擊這裏瞭解更多信息。（http://stackoverflow.com/a/21975639/6006586） –

試着改變它：

$("#menu-btn").click(function() { 
    $("#header").fadeOut("fast"); 
});

這個

$("body").on('click', '#menu-btn', function() { 
    $("#header").fadeOut("fast"); 
});

它應該有幫助，因爲jQuery方法click沒有動態元素，添加後DOM準備和分析工作。

來源

2016-12-17 15:21:40 dikkini

問題中沒有任何內容表示他正在動態添加元素。如果他這樣做，'document.getElementById（「menu-btn」）。onclick = function（）{openTop（）; };'會得到一個錯誤，因爲它會嘗試訪問'null'的'onclick'屬性。 – Barmar

設置使用javascript新onclick屬性不工作

回答

相關問題