Jquery .data() method not working when getting html attributes

Question

For some reason, the jquery .data() method is only working when the data is set using jquery. Attempting to retrieve data attributes set in the html results in a return value of null or undefined. Here is my javascript and html.

var ico = "<span class='deleteTag'></span>";
var x = "<span class='usertag' data-id='" + ui.item.userid + "'>" + ui.item.label+ " " + ico + "</span>";
$("#" + id + " .userEditor").prepend(x);

$("#" + id + " .userEditor .deleteTag").bind("click",function(){
    alert($(this).parent().attr("data-id"))
    alert($(this).parent().data("id"));
    alert($("#testdivv").data("hola"));
    $(this).parent().data("yolo","swag");
    alert($(this).parent().data("yolo"));                                     
    // $(this).parent().remove();
});

<form method="post">
    <div id="#testdivv" data-hola="hello"></div>
    <div id="user1"><div class="userEditor" style="border:1px solid gray;">
        <input style="border:0px;width:600px;" type="text" onKeyUp="if(event.keyCode != 13 && event.keyCode != 40)userSuggest('user1');"/>
    </div>
    <div class="userSuggestions"></div>
    <input name="IDList"  class="hiddenPut" type="hidden" /></div>
</form>

jQuery's data is more than just reading attributes: http://api.jquery.com/data/ — Alex, Jul 31 '14 at 19:54
Put the JS code inside `ready` handler: `$(document).ready(function() { your code here }); — hjpotter92, Jul 31 '14 at 19:54
This may also help: http://stackoverflow.com/q/23592030/3132718 — Al.G., Jul 31 '14 at 19:55
Are you sure that `ui.item.userid` has only lowercase letters (however, I suppose that it has only digits)? — Al.G., Jul 31 '14 at 19:59
@I didn't understand: I know that works. I'm just trying to understand why data isn't working. — jwesly, Jul 31 '14 at 20:01
@Musa: 1.8.4, but since data() works when data is set in jquery itself, that's not the issue — jwesly, Jul 31 '14 at 20:04
Are you sure, without any doubt that `$(this).parent()` references the correct span element (the one with class='usertag') ? — TchiYuan, Jul 31 '14 at 20:11
@Tchi-Yuan Yes, because the .attr() method returns the expected value. It's the data method that isn't working. — jwesly, Jul 31 '14 at 20:23
I see multiple things which are off in the above code. To begin with, what is `id` in your code? is it `testdivv`? Then your selector `$("#" + id + " .userEditor")` is wrong since `userEditor` is not inside the div `id#testdivv` but it is next to it. Could you provide a fiddle? — Venkata Krishna, Jul 31 '14 at 20:23
@Krishna id is = "user1". I can't provide a fiddle because I'm pulling data via ajax, which is the part of my code i cut out. — jwesly, Jul 31 '14 at 20:38

score 0 · Accepted Answer · answered Aug 01 '14 at 14:45

Here's a working JSFiddle.

It works for me in Chrome.

    $(document).ready(function(){

    var id = "editor1";
    var ui = { 
                item: { userid : "user1", label: "some label" }
             };

    var ico = "<a href='#' class='deleteTag'>ClickThisDeleteTag</a>";
    var x = "<span class='usertag' data-id='" + ui.item.userid + "'>" + ui.item.label+ " " + ico + "</span>";

    $("#" + id + " .userEditor").prepend(x);

    $("#" + id + " .userEditor .deleteTag").bind("click",function(){
        $("#answer").html($(this).parent().data("id"));
    });

});

Jquery .data() method not working when getting html attributes

1 Answers1