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

Question

前言

问题是关于HTML元素创建与HTML data属性，如<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属性的人来说， 确实如此 。

更新

截至今天，我用于此用例的解决方案是

$('<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>

小提琴