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>

小提琴