javascript - jQuery $.data() : Possible misuse?

Question

也许我没有正确使用 $.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 稍后附加到 DOM。

将 li 移动到不同的 ul:

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

稍后尝试访问数据:

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

我做错了什么？我已经确认我正在设置数据的类(class) li 与我正在寻找它的类(class)相同。 (除非我通过调用 appendTo() 来搞砸它？)

Answer 1

当您存储数据时:

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

你正在创建一个元素但没有保存它，所以它丢失了。您的警报测试测试了错误的值；应该是:

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

这是 null。考虑:

$(course_li);
$(course_li);

这将创建两个源等于 course_li 的不同元素，然后它们会立即丢失。您需要做的是先创建元素，然后使用该单个元素(即不要多次调用 $(course_li))。例如，

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

请注意，course_li 现在包含一个元素，而不是一个字符串。