Setting DOM attributes with jQuery and getting through Javascript returns 'undefined'

Question

That's not that great of a title for the question, so if anyone else has a better way to word it after reading it, that'd be appreciated.

Disclosure out of the way, this is homework. The assignment for this week is to refactor our already existing plain JS code to use JQM and I'm having an issue with a conversion I can't quite figure out, here's the code:

function populateItemLinks(key, listItem)
{

    var ecLink = $('<a class="padRightRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Edit Character");
            ecLink.on("click", editCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));

        ecLink = $('<a class="padLeftRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Delete Character");
            ecLink.on("click", deleteCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));
};

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
            console.log(this.key);
        alert("Character was deleted.");
        localStorage.removeItem(this.key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

The issue is the using of the .key attribute as an itentified for the links in the populateItemLinks functions. When it was strait javascript, I could just do linkname.key = key; and then get the key back in the deleteCharacter function with "this.key". Well, now it's always returning undefined and I can't think of any way that wouldn't be convoluted to get the same functionality as the non-JQM version, so any help would be appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 10:34

The reason your code is returning undefined is that you're trying to read a property of the DOM element, but you've set an attribute of the DOM element.

The top answers for this question explain the different between the two: .prop() vs .attr()

If you were to set the property of your newly created DOM element like this:

ecLink.prop('key', 12355);

And continued to directly access the DOM element (not via jQuery):

this.key; // 123455

All would of been well. Here is a JSFiddle example showing this in further detail.

Anyway, I've adjusted your code to work with the attribute you're setting:

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");

    if (toDelete)
    {
        var key = $(this).attr('key');
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

Having said all this, Data attributes are better suited for storing arbitrary data against a DOM element:

ecLink.data('key', myKey); // set
ecLink.data('key');        // get

score 0 · Answer 2 · answered Oct 25 '12 at 03:28

What I would do is pass the clicked ecLink as an argument to deleteCharacter() like this:

ecLink.on("click",function() { deleteCharacter($(this)); });

Then you can modify deleteCharacter():

function deleteCharacter(el)
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
        var key = el.attr('key'); //get the key attribute
        console.log(key);
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

Setting DOM attributes with jQuery and getting through Javascript returns 'undefined'

2 Answers2