jQuery 使用“data” HTML 属性创建一个新元素

Preamble

问题是关于使用 HTML 创建 HTML 元素data属性，比如<object data="foo"></object>.

问题

几分钟前我偶然发现了这个问题，这是一个快速问题；如果我写

$('<div>', { id:"foo", 'class':"bar" });
// <div id="foo" class="bar"></div>

However

$('<object>', { id:"foo", data:"some+data+string" });
// [ <object id="foo"></object> ]

我期望输出是

// [ <object id="foo" data="some+data+string"></object> ]

我知道关于.data。我的问题是

$('<object>', { id:"foo", data:"some+data+string" }).data();
// Object {}
$('<object>', { id:"foo", 'data-foo':"some+data+string" }).data();
// Object {foo:"some+data+string"}

那么...为什么它不创建 HTML 属性data因为它不是一个data-xxxx属性名称，因此不会创建任何实际数据？

Update

我将再次重申这个问题中所写的内容。

[...]如果我写

$('<div>', { id:"foo", 'class':"bar" });
// <div id="foo" class="bar"></div>

However

$('<object>', { id:"foo", data:"some+data+string" });
// [ <object id="foo"></object> ]

我期望输出是

// [ <object id="foo" data="some+data+string"></object> ]

...我再一次知道.data.

为什么不$('<div>', { data: 'foo' }) create <div data="foo"></div>，或者换句话说，为什么它在创建元素时完全忽略该属性？

Edit

对于所有争论的人data不是一个有效的 HTML 属性，好吧，it is http://www.w3.org/TR/html4/struct/objects.html#adef-data.

Update

截至今天，我针对此用例使用的解决方案是

$('<div>', {
  attr: {
    data: 'foo'
  }
});

当创建一个元素并传递一个带有属性和方法的对象时，任何 jQuery 方法都是有效的，所以你可以这样做

$('<div />', { 
    id      : "foo",  
    'class' : "bar",
    text    : "test",          // jQuery text() is called,
    html    : '<span></span>', // jQuery html() is called,
    css     : {                // jQuery css() is called,
        color: 'red'
    },
    on : {                     // calls jQuery's .on('click' ...
        click: function() {
             alert
        }
    }
});

同样地，data=""不是一个通用属性，它仅对少数元素有效，例如<object>，并且 jQuery 似乎没有考虑到这一点，所以你不能设置data=""属性，因为 jQuery 将捕获data()方法第一。

换句话说，这不起作用，而是使用 data() 设置内部数据对象

$('<object />', {data : 'somedata'});

一个相当奇怪的解决方法是，这似乎区分大小写，因此 jQuery 只会在键全部小写时查找方法，而另一方面，jQuery attr() 将始终小写属性，因此执行以下任何操作

$('<object>', { id:"foo", 'Data' : "some+data+string" });
$('<object>', { id:"foo", 'daTa' : "some+data+string" });

实际上会起作用，并且该属性在设置时将小写，因此您最终会得到

<object id="foo" data="some+data+string"></object>

FIDDLE http://jsfiddle.net/adeneo/k8QDT/1/