前言
问题是关于使用HTML数据属性创建HTML元素,例如< object data =“foo”>< / object>.
问题
几分钟前我偶然发现了这个问题.如果我写
$('<div>',{id:"foo",'class':"bar" });
// <div id="foo" class="bar"></div>
然而
$('<object>',data:"some+data+string" });
// [ <object id="foo"></object> ]
我期望输出的地方
// [ <object id="foo" data="some+data+string"></object> ]
我知道.data.我的问题是
$('<object>',data:"some+data+string" }).data();
// Object {}
$('<object>','data-foo':"some+data+string" }).data();
// Object {foo:"some+data+string"}
那么……为什么不创建HTML属性数据,因为它不是data-xxxx属性名,因此不会创建任何实际数据？
更新
我将再次重申这个问题的内容.
[…]如果我写
$('<div>',data:"some+data+string" });
// [ <object id="foo"></object> ]
我期望输出的地方
// [ <object id="foo" data="some+data+string"></object> ]
……再一次,我知道.data.
为什么不$(‘< div>‘,{data：’foo’})创建< div data =“foo”>< / div>,或者换句话说,为什么它完全忽略该属性什么时候创建元素？
编辑
对于所有那些认为数据不是有效的HTML属性的人,好吧,it is.
更新
截至今天,我用于此用例的解决方案是
$('<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>','daTa' : "some+data+string" });
实际上会工作,设置时属性会更低,所以你最终得到了
<object id="foo" data="some+data+string"></object>
