Getting values from data attribute not working

Question

I tried to do what's explained in this question where there is an useful jsfiddle link in the accepted answer.
I got a basic page like this:

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <style>
        section {
            display: none;
        }

        #home { height: 200px; background: beige; display: block;}
        #products { height: 1000px; background: honeydew; }
        #contact { height: 500px; background: seashell; }
    </style>
    <title> Leggy </title>

     <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

    <script>
        $("a").on("click", function() {
            var id = $(this).data("section");
            alert(id);
            $("section:visible").fadeOut(function() {
                $(id).fadeIn();
            });
        });
    </script>
</head>
<body>

<a href="#" data-section="#home">Home</a>
<a href="#" data-section="#products">Products</a>
<a href="#" data-section="#contact">Contact</a>

<div id="wrapper"></div>

<section id="home">Home</section>
<section id="products">Products</section>
<section id="contact">Contact</section>

</body> 
</html>

But then when running it Firefox console says just that getUserData() and setUserData() are deprecated. I can't really understand what does that mean and how to fix it, since this is the only thing that could be an issue, for what I can see..

What actually happens is that script is not executed, I would say, since the alert is not launched.

Where am I doing it wrong?

love people who downvote questions without explainations – Leggy7 May 04 '14 at 17:41 — Leggy7, May 04 '14 at 17:41

Wilfredo P · Accepted Answer · 2014-05-04T15:51:31.023

1

Wrap all in document.ready():

$(document).ready(function(){
 $("a").on("click", function() {
            var id = $(this).data("section");
            alert(id);
            $("section:visible").fadeOut(function() {
                $(id).fadeIn();
            });
        });
})

Live Demo

edited May 04 '14 at 15:51

answered May 04 '14 at 15:45

Wilfredo P

4,070
28
46

thanks dude. I know this was trivial but I'm totally new to jQuery. Great help :) – Leggy7 May 04 '14 at 17:36

score 1 · Answer 2 · answered May 04 '14 at 15:49

Your Javascript code is being executed before the necessary elements exist in the DOM - you can't attach the click event to the a element before the a element exists.

To remedy this you should put $(document).ready(function(){ ... } around your Javascript, which will make sure the code will only be run once the page has loaded and the DOM is set up.

Getting values from data attribute not working

2 Answers2