nicht angemeldet
Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum
TS
Rolf BIch habe eine Website mit jQuery mobile optisch aufgewertet. Durch Klick auf einen Button wird dynamisch ein div-Container mit Radiobuttons, Checkboxen, Buttons, input-Felder und anderem erstellt. Das Problem ist, dass zwar der Container von jQuery bearbeitet wird, die untergeordneten Strukturen wie die Radiobuttons aber ihr langweiliges Standardaussehen beibehalten. Füge ich den Code der div-Container hingegen von vorneherein in den Quellcode des Dokumentes ein, so wird alles richtig dargestellt. Woran liegt das?
-
Hello,
vermutlich hast Du die Style-Attribute alle nach und nach mit jQuery verändert? Schlechte Idee! Ein vorgefertigtes CSS für das alte einzubauen, wäre besser...
Es könnte an der Reihenfolge der Veränderungen liegen und der Vererbungshierarchie. Aber ohne Code kann man da nur raten.
Liebe Grüße
Tom S.--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
-
Hallo Tom, ich habe eine fertige CSS-Libary eingebunden. Aber ich sehe mir die Vererbung nochmal an. Danke
-
-
Hallo Markus,
- hast Du das mit mehreren Browsern getestet? Ist das Problem bei allen gleich?
- bist Du 100% sicher, und kannst Du es bei den Weihnachtskeksen deiner Oma beschwören, dass der Einbau mit jQuery zum gleichen DOM führt wie die manuelle Integration?
- wie TS schon sagte - ohne Source ist die Hilfe schwer, hast Du eine URL? Sowohl für die manuelle eingefügte wie auch für die jQuery Version?
Rolf
--
sumpsi - posui - clusi -
Hier mal eine Kurzform des Quellcodes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.mobile-1.3.2.js" type="text/javascript" ></script> <script src="jquery-3.2.1.js" type="text/javascript" ></script> <style> <!-- .smallDevice { width : 400px; height : 280px; padding : 10px; margin: 10px; } //--> </style> <script type="text/JavaScript"> <!-- function OnCreateNewDevice() { var formatSettings = "<div class='ui-body ui-body-a ui-corner-all smallDevice'>" + "<input type='button' value='Neuer Button'></div>"; var newDevice = document.createElement("DIV"); document.getElementById("deviceFrame").appendChild(newDevice); newDevice.innerHTML = formatSettings; } //--> </script> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <div data-role="page" id="page" class="type-interior" data-theme="a" name="mainPage"> <input type='button' value='Create new device' onClick='OnCreateNewDevice();'> <div id="deviceFrame"></div> </div> </body> </html>-
Hallo Markus,
ich versuche, das in einem Fiddle nachzustellen. jquerymobile 1.3.2 ist nicht per CDN verfügbar, ich habe 1.4.5 verwendet.
Was auf keinen Fall geht, ist jQuery 3.2 hinzuzunehmen. jquerymobile setzt in der 1.4.5 Version auf jQuery 1.10 auf, in der 1.3.2-Version auf jQuery 1.9. Wenn das von Dir eingebundene jquery.js genau das passende ist, ok, aber dann darfst Du nicht jquery-3.2.1 hinzunehmen. Ich glaube nicht, dass zwei jQuery-Versionen sich auf der gleichen Seite vertragen. Nachdem ich die passende jQuery-Version eingesetzt habe, habe ich immerhin mal einen jquerymobile-Effekt und kann den Fehler nachstellen.
Rolf
--
sumpsi - posui - clusi-
Hallo Markus,
ok, gefunden.
Offenbar erkennt jquery mobile nicht automatisch, dass das DOM verändert wurde. Es gibt aber eine Methode, mit der man ihm Bescheid geben kann.
Und zum Anhängen eines HTML-Blocks an ein DIV gibt's jQuery-Methoden, das brauchst Du nicht von Hand zu schreiben. So geht es:
$("#deviceFrame").append(formatSettings).enhanceWithin();.append() gibt ein Wrapped Set für das hinzugefügte HTML zurück; darauf kann man dann .enhanceWithin() direkt anwenden. Bei mir dreht's nun.
Rolf
--
sumpsi - posui - clusi-
Super, hat geklappt. Vielen Dank.
-
-
-