jQuery-erstellen Sie eine neue element mit `data` HTML-Attribut

Präambel

Die Frage ist, über HTML-element-Erstellung mit einem HTML - data Attribut, wie <object data="foo"></object>.

Die Frage

Kurze Frage, wie ich stolperte über diese vor ein paar Minuten; Wenn ich Schreibe,

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

Jedoch

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

wo ich erwartet, dass der Ausgang

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

Weiß ich über .data. Mein problem ist, dass

$('<object>', { id:"foo", data:"some+data+string" }).data();
//Object {}
$('<object>', { id:"foo", 'data-foo':"some+data+string" }).data();
//Object {foo:"some+data+string"}

Also... warum tut Sie es nicht schaffen, ist das HTML-Attribut data da es nicht eine data-xxxx - Attribut name, und so keine tatsächlichen Daten?

Update

Werde ich auch wiederholen, was er geschrieben hat, in dieser Frage einmal mehr.

[...] Wenn ich Schreibe

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

Jedoch

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

, wo ich erwartet, dass der Ausgang

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

... und noch einmal, ich weiß über .data.

Warum nicht $('<div>', { data: 'foo' }) erstellen <div data="foo"></div>, oder in anderen Worten, warum wird es ignoriert das Attribut insgesamt bei der Erstellung des Elements?

Bearbeiten

Für alle diejenigen, die argumentieren, dass data ist keine gültige HTML-Attribut, gut, es ist.

Update

Als heute, die Lösung, die ich verwende für diesen Anwendungsfall ist

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

Das übergebene Objekt, wenn die Erstellung der Elemente enthält Attribute und/oder Methoden, und der name des Attributs ist data-foo, nicht data. Nur weil die jQuery - data() Funktion übernimmt der zweite Teil des data-Attribut als argument bedeutet nicht, dass es funktionieren würde, dass Weg irgendwo anders.
jsfiddle.net/adeneo/kC9QG
liest du die Frage nochmal? Das hat nichts mit mir zu tun haben wollen, zu erstellen data-foo.
Warum tun Sie am Ende Ihrer letzten Beispiele mit .data()?
um die Ausgabe des Daten-Objekts, und um zu zeigen, wie inkonsequent es ist, da { data:'foo } nicht alles erstellen und { 'data-foo':'foo' } erstellt { foo:'foo' }
Hinweis:: es ist nicht, weil Sie nicht Lesen können, eine Frage, und sind verärgert, wenn jemand korrigiert, dass Sie gerechtfertigt sind, um downvote eine Frage. Nur zu sagen.
Es ist, weil jQuery schafft nur das data-Attribut, wenn es gültig ist, und es ist nur gültig, es ist ein Bindestrich, gefolgt von einem Bezeichner, wie in data-something die Spezifikation eindeutig fest data-*, nicht data
wieder, ich weiß, dass. Warum also, wenn data nicht enthält, die einen hypen, nicht wahr erstellen Sie ein HTML-Attribut namens data? Ein HTML-Attribut namens data ist vollkommen in Ordnung und und folgt auch den HTML-specs.
Da die Daten ist auch eine Methode, und die Methode, wenn Namen verwendet werden, die Methode wird aufgerufen, und die Daten, die Methode wird nicht die Attribute.
Und data="" ist kein gültiges Attribut -> w3.org/TR/2010/WD-html5-20101019/..., es hat einen Bindestrich, gefolgt von mindestens einem Zeichen, aber warum tun wir noch botter, du bist nicht zu hören, was wir sagen ?
Sie sind verwirrender Daten-Attribute (d.h. data-*) und ein Attribut, dessen name ist data, die eine juristische Attribut name.
w3.org/TR/html4/struct/objects.html#adef-data
Also, genauer zu sein in der Frage, object-tags haben ein data-Attribut, aber in der Regel, dass ist kein gültiges Attribut, und Sie mischen es mit HTML5 data-Attribute, so ist es schwer zu sehen, aber wieder jQuery verwenden die data() Methode, wenn data verwendet wird, also denke ich es nicht berücksichtigt, für die selten verwendeten Daten-Attribut für object-tags.
Hatte Sie gebeten die Frage skizziert, warum genau bist du mit dem object-tag und dem, was Sie erwarten, in eine sehr besseren Weg, mir und @j08691 würde nicht missverstanden haben Sie, und Sie sind etwas unhöflich, wenn Sie nicht in der Lage, um Ihren Standpunkt zu vermitteln.
Wir könnten argumentieren, eine lange Zeit über diese. Aber dein argument kann umgedreht; meine ursprüngliche Frage wurde nicht bearbeitet, ich habe nur Hinzugefügt, Präambel und einige updates. Die Frage ist klar genug, wenn Sie aufhören, in die falsche Richtung. BTW, meine Unhöflichkeit kommt aus der Erfahrung, die ich SO für eine Weile jetzt (und nicht nur von Fragen, die ich Frage, aber das sehe ich auf anderen Benutzer), wie die Leute sind schnell, um eine (falsche) Meinung und senkt die Qualität der Inhalte dieser Website. Nicht alle Menschen sind Personen mit Englisch als Muttersprache. Es ist das Internet, nachdem alle. Wir haben nicht alle Leben in den USA.
Gut, das ist wahr, ich bin nicht Deutsch als Muttersprache sprechen und noch nicht verstehen, die Frage, aber ich habe etwas bekommen, es jetzt nach all den Kommentaren, und die Antwort ist einfach, jQuery sieht für Methoden in das Objekt zuerst übergeben, das ist, warum Sie verwenden können on() und css() direkt in das Objekt, wie diese, und data() ist eine Methode, als auch, und es nur setzt die Daten intern und jQuery hat zu suchen, der Methoden, bevor es verwendet den Schlüssel als Attribute, als wäre es zu spät, nachdem die Attribute festgelegt sind, und wenn der Schlüssel passt zu einer Methode, die kein Attribut gesetzt ist.
naja, das ist eine gute Antwort. Warum ist es ein Kommentar? 🙂
Gib mir eine Sekunde, etwas zu veröffentlichen

InformationsquelleAutor Yanick Rochon | 2014-04-05

jquery

9

Bei der Erstellung des Elements übergeben und ein Objekt mit Attributen und Methoden, jede jQuery-Methode gültig ist, also man kann
```
$('<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
        }
    }
});
```
In der gleichen Weise, data="" ist nicht mit einem gemeinsamen Attribut, es ist nur gültig, auf wenige Elemente, wie <object> und jQuery scheint nicht, um für dieses Konto, so können Sie nicht von einer data="" attribute als jQuery fangen die data() Methode zuerst.

In anderen Worten, das funktioniert nicht, sondern es setzt die internen Daten-Objekt mit Daten()
```
$('<object />', {data : 'somedata'});
```
Einer ziemlich seltsamen workaround ist, dass dies scheint zu sein, groß-und Kleinschreibung, so jQuery wird nur Blick für die Methoden, wenn der Schlüssel ist, alle Kleinbuchstaben, und auf der anderen Seite, jQuery attr() wird immer kleingeschrieben Attribute, so dass Sie diese
```
$('<object>', { id:"foo", 'Data' : "some+data+string" });
$('<object>', { id:"foo", 'daTa' : "some+data+string" });
```
tatsächlich funktionieren, und das Attribut wird niedriger sein, verkleidet als set, so dass Sie am Ende mit
```
<object id="foo" data="some+data+string"></object>
```
GEIGE
- Danke für die ausführliche Erklärung.
- Du bist willkommen, und es ist wirklich eine ziemlich interessante Frage auf, wie jQuery funktioniert, es war nur ein wenig schwer zu verstehen auf den ersten.
- Beachten Sie dies: stackoverflow.com/a/9898519/2134533
InformationsquelleAutor adeneo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.