W3 Schools example not working?

Question

I'm trying to figure out this example by W3 Schools, but as far as I can tell, it's not working. 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/

Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_on_live

W3schools is typically simple but out dated and sometimes incorrect use reference sites instead like MDN or jQuery documentation. — shaunhusain, Feb 24 '17 at 18:02

score 4 · Accepted Answer · 2016-05-27T02:21:03.533

It is because jQuery.fn.live(..); has been deprecated in version 1.7 and completely removed in version 1.9.

You are using jQuery 1.12.2, the method jQuery.fn.live(...); does not exist in this version of jQuery.

To get jQuery.fn.live(...); to work you must change the script element to this:

<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:

<!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>

**Complement** : Version [1.9 release date](https://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/) is `January 15, 2013`. Removal of `$.live` method [is confirmed in 1.9 here](http://jquery.com/upgrade-guide/1.9/#live-removed). — Louys Patrice Bessette, May 27 '16 at 02:54
@LouysPatriceBessette Thank you for the extra info, appreciate it. — , May 27 '16 at 02:55

omarjmh · Answer 2 · 2016-05-27T02:21:37.547

2

As of jQuery 1.7, the .live() method is deprecated.

In your fiddle you're using v1.12.2

Same with w3c:

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

So change the src to:

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"

and it works

http://api.jquery.com/live/

edited May 27 '16 at 02:21

answered May 27 '16 at 02:10

omarjmh

13,632
6
34
42

Thanks for the answer. That same example is not working on the W3C site either (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_on_live). I guess it's just an outdated example. – Bryan Miller May 27 '16 at 02:12
1

see my edit... change the jquery version on wc3, I just tried it and it works – omarjmh May 27 '16 at 02:13

Sangamesh Davey · Answer 3 · 2016-05-27T02:24:14.270

2

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks.

Source:http://api.jquery.com/live/

edited May 27 '16 at 02:24

answered May 27 '16 at 02:16

Sangamesh Davey

75
1
7

i added the source in the edit..Thanks for telling me @hlfrmn – Sangamesh Davey May 27 '16 at 02:25

score 0 · Answer 4 · answered Feb 24 '17 at 13:10

0

Please notice: Your example is not from W3C (see title given by you). 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).

answered Feb 24 '17 at 13:10

Peter

97
13

Hey @Peter, Stack Overflow has a policy that answers should contain a potential solution for a problem. Comments and other non-answers should be left as comments instead. – T0xicCode Feb 24 '17 at 13:36
Hey @T0xicCode, I know this policy but I'm blocked by another policy: When I've tried to comment the original issue I received "You must have 50 reputation to comment". – Peter Feb 24 '17 at 16:58
Off course - I made the same assumption in the past (and lost time by the bad examples of w3schools). – Peter May 23 '17 at 11:21

score -1 · Answer 5 · answered Aug 12 '20 at 12:40

-1

also make sure that you look in w3schools browser supports to see if it will work

answered Aug 12 '20 at 12:40

codesforkids

9
6

W3 Schools example not working?

5 Answers5

Linked