Ich habe ein jQuery-Objekt $svg aus einem HTML String erstellt und möchte das jetzt ins DOM einfügen (dort wo vorher $img war). Das funktioniert soweit. Wenn ich aber das Objekt cache und dann einfügen will, funktioniert es nicht:
[javascript]var replaceImgWithSvg = function($img, $svg) {
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
$img.replaceWith($svg);
};
[/javascript]
Dieser Code wird in beiden Fällen aufgerufen, funktioniert aber mit Cachen nur einmal pro svg Bild. Wenn er nicht funktioniert, wird schlicht kein HTML eingefügt, $img aber trotzdem entfernt.
Das interessante ist jetzt, dass wenn man die Zeile $img.replaceWith($svg); ersetzt durch $img.replaceWith($($svg.prop('outerHTML')));, dann funktioniert es in allen Fällen. Gleiches gilt auch für append.
In Worten: Wenn ich $svg direkt ins DOM einsetzte klappts nicht, wenn ich es zu HTML konvertiere und dann wieder zu jQuery und dann einsetzte, dann funktioniert es.
Kann mir jemand sagen woran das liegt? Ich würde das mit dem konvertieren nur ungern machen wollen.
*** Edit ***
Okay hab die Lösung geflüstert bekommen : D
$svg wrappt einen DOM Node, der beim neu einfügen an der alten Stelle verschwindet. Beim Erzeugen aus HTMl entsteht jedoch ein neuer Node. Man muss also aus dem gecachte $svg Objekt mit clone() ein frisches erzeugen, bevor man meine Methode aufruft:
replaceImgWithSvg ($img, $svg.clone())