Javascript / jQuery onclick不起作用
[英]Javascript/jQuery onclick not working
问题描述
i made a test.html document to test a script. 
我制作了一个test.html文档来测试脚本。 Somehow it is not working and i can't get why nothing is happening. 不知怎的，它不起作用，我无法理解为什么没有发生任何事情。 The Script is in -tags and wrapped with -tag and the css also has it´s -tags. 脚本在-tags中并用-tag包装，而css也有-tags。 Why shouldn't it work? 它为什么不起作用？ Here is the code 这是代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
4 个解决方案
解决方案1
12 已采纳 2015-08-26 09:31:30
Because your code for binding event handler is executed before the elements is present in DOM , the event is not bound on the element. 因为绑定事件处理程序的代码是在DOM存在元素之前执行的，所以事件不会绑定在元素上。
To solve this problem, you can either 要解决这个问题，你可以
- Wrap your code in
ready()callback, so that your code will be executed whenDOMis finished loading将代码包装在ready()回调中，以便在DOM加载完成后执行代码 - Move your script to the end of
<body>, so all the elements are present inDOMand you can bind the events on it将脚本移动到<body>的末尾，因此所有元素都存在于DOM，您可以在其上绑定事件
Code: 码：
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
EDIT 编辑
You can also use load ( not recommended ) event callback to bind the event, but this will wait for all the resources to load completely. 您还可以使用load （ 不推荐 ）事件回调来绑定事件，但这将等待所有资源完全加载。
If you want to use Vanilla Javascript, you can use DOMContentLoaded event on document . 如果要使用Vanilla Javascript，可以在document上使用DOMContentLoaded事件。
解决方案2
8 2015-08-26 09:32:10
you are executing the code before the DOM content is loaded. 您正在加载DOM内容之前执行代码。 Place your code in a ready block. 将代码放在就绪块中。
解决方案3
0 2015-08-26 10:34:27
You are executing the JavaScript before the <body> tag loads, which contains your <li> elements. 您正在加载<body>标记之前执行JavaScript，其中包含<li>元素。
To solve this problem, you have three choices : 要解决此问题，您有三种选择：
1.You can insert the JavaScript code you have written inside a $(document).ready() callback. 1.您可以在$(document).ready()回调中插入您编写的JavaScript代码。 (see http://www.w3schools.com/jquery/event_ready.asp for more information) （有关更多信息，请参阅http://www.w3schools.com/jquery/event_ready.asp ）
Code : 代码：
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
2.You can use the JavaScript's built in window.onload function. 2.您可以使用JavaScript内置的window.onload功能。 (see https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/ for more information) （有关更多信息，请参阅https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/ ）
Code: 码：
window.onload = function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
}
3.Place your <script> tag before </body> tag in your page. 3.在页面中的</body>标记前放置<script>标记。
Code: 码：
<head>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
</body>
$(document).ready()is a better option than usingwindow.onload.$(document).ready()是比使用window.onload更好的选择。 (see window.onload vs $(document).ready() for more information)
解决方案4
0 2015-09-10 07:12:26
Your code is fine. 你的代码很好。 Just wrap it in DOM ready and you are good to go. 只需将它包装在DOM准备就绪就可以了。
$(document).ready(function(){
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.