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>