tag:forum.selfhtml.org,2005:/self Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum – SELFHTML-Forum 2017-12-04T09:13:53Z https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709187#m1709187 Markus Zuckerberg 2017-11-25T18:00:57Z 2017-11-25T18:00:57Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Ich 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?</p> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709188#m1709188 TS ts-self@online.de https://bitworks.de 2017-11-25T18:11:27Z 2017-11-25T18:11:27Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hello,</p> <p>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...</p> <p>Es könnte an der Reihenfolge der Veränderungen liegen und der Vererbungshierarchie. Aber ohne Code kann man da nur raten.</p> <p>Liebe Grüße<br> Tom S.</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es!<br> Das Leben selbst ist der Sinn.<br> </div> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709192#m1709192 Rolf B 2017-11-25T23:32:06Z 2017-11-25T23:32:06Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hallo Markus,</p> <ol> <li>hast Du das mit mehreren Browsern getestet? Ist das Problem bei allen gleich?</li> <li>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?</li> <li>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?</li> </ol> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709258#m1709258 Markus Z. 2017-11-27T17:10:13Z 2017-11-27T17:11:24Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hier mal eine Kurzform des Quellcodes:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/html4/loose.dtd"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jquery.mobile-1.3.2.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jquery.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jquery.mobile-1.3.2.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jquery-3.2.1.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector"><!-- .smallDevice</span> <span class="token punctuation">{</span> <span class="token property">width</span> <span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 280px<span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> //--> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/JavaScript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token keyword">function</span> <span class="token function">OnCreateNewDevice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> formatSettings <span class="token operator">=</span> <span class="token string">"<div class='ui-body ui-body-a ui-corner-all smallDevice'>"</span> <span class="token operator">+</span> <span class="token string">"<input type='button' value='Neuer Button'></div>"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> newDevice <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"DIV"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"deviceFrame"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newDevice<span class="token punctuation">)</span><span class="token punctuation">;</span> newDevice<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> formatSettings<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//--></span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000000<span class="token punctuation">"</span></span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FFFFFF<span class="token punctuation">"</span></span> <span class="token attr-name">link</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token attr-name">alink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token attr-name">vlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type-interior<span class="token punctuation">"</span></span> <span class="token attr-name">data-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mainPage<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>button<span class="token punctuation">'</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Create new device<span class="token punctuation">'</span></span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span><span class="token value javascript language-javascript"><span class="token function">OnCreateNewDevice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">'</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deviceFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709240#m1709240 Markus Z. 2017-11-27T11:54:47Z 2017-11-27T11:54:47Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hallo Tom, ich habe eine fertige CSS-Libary eingebunden. Aber ich sehe mir die Vererbung nochmal an. Danke</p> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709262#m1709262 Rolf B 2017-11-27T18:24:47Z 2017-11-27T18:35:11Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hallo Markus,</p> <p>ich versuche, das in einem Fiddle nachzustellen. jquerymobile 1.3.2 ist nicht per CDN verfügbar, ich habe 1.4.5 verwendet.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709263#m1709263 Rolf B 2017-11-27T18:44:00Z 2017-11-27T18:44:16Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Hallo Markus,</p> <p>ok, gefunden.</p> <p>Offenbar erkennt jquery mobile nicht automatisch, dass das DOM verändert wurde. Es gibt aber eine Methode, mit der man ihm Bescheid geben kann.</p> <p>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:</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#deviceFrame"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>formatSettings<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">enhanceWithin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>.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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2017/nov/25/problem-mit-jquery-beim-dynamischen-eingriff-in-den-dom-baum/1709572#m1709572 Markus Z. 2017-12-04T09:13:53Z 2017-12-04T09:13:53Z Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum <p>Super, hat geklappt. Vielen Dank.</p>