jQuery 创建一个带有 `data` HTML 属性的新元素

Question

序言

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

问题

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

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

但是

$('<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属性名称，因此不会创建任何实际数据？

更新

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

[...]如果我写

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

但是

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

我期望的输出

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

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

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

编辑

对于所有争论 data 的人不是有效的 HTML 属性，it is .

更新

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

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

Answer 1

当创建一个元素并传递一个带有属性和方法的对象时，任何 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