jQuery data() returns undefined constantly

Question

Below is the HTML and following jQuery. If I return the attr("data-conn"); it alerts the correct value but using .data("conn") it doesn't. Why?

<span>
    <!-- ... -->
    <a href="link.html" class="textbutton"  data-conn="text3">
        <img src="/images/image.png">
    </a>
</span>
<span style="width:610px;height:200px;float:right; background-color:#bcbcbc;font-size:15px;line-height:15px;">
    <div class="texts" id="text1">Initial Header</div>
    <span class="texts" id="text2" style="display:none;">Text for another one</span>
    <span class="texts" id="text3" style="display:none;">Content Text</span>
</span>

<script type="text/javascript">
    $(".textbutton").click(function(){
        var link = $(this).data("conn");
        alert(link);
        $(".texts").fadeOut(1000, function() {
            $("#text2").fadeIn(1000);
        });
        return false;
    });
</script>

what browser are you using ? ( and are you using the html5 doc type? not sure if that has any effect ) — Willem D'Haeseleer, May 27 '13 at 12:19
I think I am using an old version of jQuery thanks for pointing that out I hadn't even thought of it — Somk, May 27 '13 at 12:22
[Seems to work just fine as is to me!](http://jsfiddle.net/SpYk3/urK5L/) using jQuery 1.6.4 — SpYk3HH, May 27 '13 at 12:23
Although it seems to work fine, I would change one of 2 things. Either change the `return false` to `e.preventDefault()` ***OR*** remove the `return false` and in the HTML change the `href="link.html"` to `href="javascript:void()"`. See my previously mentioned fiddle for `e.preventDefault()` example — SpYk3HH, May 27 '13 at 12:26
possible duplicate of [jQuery data() returns undefined, attr() returns integer](http://stackoverflow.com/questions/10992984/jquery-data-returns-undefined-attr-returns-integer) — givanse, Feb 01 '14 at 19:22

score -1 · Accepted Answer · edited Jan 23 '20 at 21:39

-1

The way you're trying works fine using the latest version of jQuery:

var link = $(this).data("conn");

Here is a working demo

You may alternatively try like this

var link = $(this).attr("data-conn");

edited Jan 23 '20 at 21:39

isherwood

58,414
16
114
157

answered May 27 '13 at 12:15

kongaraju

9,344
11
55
78

2

That works like I said, but why should it and not what I was trying? – Somk May 27 '13 at 12:16
the way he has it should work just fine. See http://api.jquery.com/data/#data-html5 – SpYk3HH May 27 '13 at 12:18
look at element dataset object may be it wasnt included. – kongaraju May 27 '13 at 12:18
2

Works fine for me with `.data()` : [**jsFiddle**](http://jsfiddle.net/SpYk3/urK5L/) – SpYk3HH May 27 '13 at 12:21
1

I had this same issue, and it was jquery-migrate redefining data(). – Michael G Apr 24 '15 at 14:39

jQuery data() returns undefined constantly

1 Answers1