Question

Perhaps I’m using $.data incorrectly.

Assigning the data:

var course_li = sprintf('<li class="draggable course">%s</li>', course["fields"]["name"]);

$(course_li).data('pk', course['pk']);
alert(course['pk']); // shows a correct value

alert($(course_li).data('pk')); // shows null. curious...

course_li is later appended to the DOM.

Moving the li to a different ul:

function moveToTerm(item, term) {
    item.fadeOut(function() {
        item.appendTo(term).fadeIn();
    });
}

Trying to access the data later:

$.each($(term).children(".course"), function(index, course) {
      var pk = $(course).data('pk');
      // pk is undefined
      courses.push(pk);
});

What am I doing wrong? I have confirmed that the course li on which I am setting the data is the same as the one on which I am looking for it. (Unless I’m messing that up by calling appendTo() on it?)

Answer 1

When you store the data:

$(course_li).data('pk', course['pk']);

you’re creating an element but not saving it, so it’s lost. Your alert test test the wrong value; it should be:

$(course_li).data('pk', course['pk']);
alert($(course_li).data('pk'));

which is null. Consider:

$(course_li);
$(course_li);

This creates two different elements with source equal to course_li, which are then promptly lost. What you need to do is create the element first, then work with that single element (i.e. don’t call $(course_li) more than once). For example,

var course_li = $(sprintf('<li class="draggable course">%s</li>', 
                          course["fields"]["name"]));
course_li.data('pk', course['pk']);
parent.append(course_li);

Note that course_li now holds an element, rather than a string.