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