Question

jsfiddle: http://jsfiddle.net/mAF6A/3/

I’m cloning a template TR in a table, setting a $.data() attribute of the clone and appending it to the table. After I append it, it looses the data attribute though. What am I doing wrong here?

var arr = [{
    name: "one",
    id: 1},
{
    name: "two",
    id: 2},
{
    name: "three",
    id: 3}];

$.each(arr, function(i, item) {
    var clone = $("tr.template").clone().removeClass("template");
    clone.find(".value").html(item.name);
    clone.data("number", item.id);
    clone.find(".data").html("My data is: " + clone.data("number"));
    $("table").append(clone);
});

$("tr[data-number='2']").remove();

Answer 1

clone.data("number", item.id);

This does not add a data- attribute to the element. It stores it in jQuery’s internal “data” object.

You need to actually add the attribute to the element.

clone.attr("data-number", item.id);

The data method can read data- attributes, but it can’t write them.