W3 学校示例不起作用？
[英]W3 Schools example not working?
问题描述
I'm trying to figure out this example by W3 Schools, but as far as I can tell, it's not working.
我试图找出 W3 Schools 的这个例子，但据我所知，它不起作用。 Could someone steer me clear if I'm missing something?如果我遗漏了什么，有人可以引导我吗？
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").on("click", function(){
$(this).css("background-color", "pink");
});
$("#div2").live("click", function(){
$(this).css("background-color", "pink");
});
});
</script>
</head>
<body>
<h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and live().</h4>
<div id="div1" style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>on() method</b>.</p>
</div><br>
<div id="div2" style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>live() method</b>.</p>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/gratiafide/dwmwm43a/小提琴： https : //jsfiddle.net/gratiafide/dwmwm43a/
Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_on_live来源： http : //www.w3schools.com/jquery/tryit.asp? filename= tryjquery_event_on_live
5 个解决方案
解决方案1
4 已采纳
It is because jQuery.fn.live(..);这是因为jQuery.fn.live(..); has been deprecated in version 1.7 and completely removed in version 1.9.已在 1.7 版中弃用，并在 1.9 版中完全删除。
You are using jQuery 1.12.2 , the method jQuery.fn.live(...);您正在使用jQuery 1.12.2方法jQuery.fn.live(...); does not exist in this version of jQuery.此版本的 jQuery 中不存在。
To get jQuery.fn.live(...);获取jQuery.fn.live(...); to work you must change the script element to this:要工作，您必须将script元素更改为：
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
If you would like to use the newest version of jQuery use this instead:如果您想使用最新版本的 jQuery，请改用：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").on("click", function() {
$(this).css("background-color", "pink");
});
});
</script>
</head>
<body>
<div id="div1" style="border:1px solid black;">
Hello World!
<p>Click me to make me pink!</p>
</div>
</body>
</html>
解决方案2
2 2016-05-27 02:10:40
As of jQuery 1.7, the .live() method is deprecated.从 jQuery 1.7 开始，不推荐使用.live()方法。
In your fiddle you're using v1.12.2在您的小提琴中，您使用的是 v1.12.2
Same with w3c:与 w3c 相同：
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
So change the src to:因此，将 src 更改为：
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"
and it works它有效
解决方案3
2 2016-05-27 02:16:46
Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks.不再推荐使用 .live() 方法，因为更高版本的 jQuery 提供了没有缺点的更好的方法。
Source: http://api.jquery.com/live/来源： http : //api.jquery.com/live/
解决方案4
0 2017-02-24 13:10:22
Please notice: Your example is not from W3C (see title given by you).请注意：您的示例并非来自 W3C（请参阅您提供的标题）。 You cited w3schools and checking with other issues at stackoverflow you'll find out that there is no affiliation between w3c and w3school (except the first two characters).您引用了 w3schools 并在 stackoverflow 上检查了其他问题，您会发现 w3c 和 w3school 之间没有从属关系（前两个字符除外）。
解决方案5
-1 2020-08-12 12:40:27
还要确保您查看 w3schools 浏览器支持以查看它是否有效
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.