Schlagwort-Archive: jquery

JQuery Event Listener für hinzugefügten Inhalt

Computer, , , ,

Wenn auf einer Webseite nach dem Laden Inhalt hinzugefügt wird, funktionieren Event Listener auf diesen hinzugefügten Inhalt nicht.  Nehmen wir diesen JQuery-Code:

[code language=“js“]
$("p").click(function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

Beim Klick auf einen Absatz wird danach ein neuer Absatz eingefügt mit dem Inhalt Another paragraph!. Klickt man auf diesen neuen Absatz Another paragraph! passiert nichts, obwohl laut dem JQuery-Code ja eigentlich beim Klick auf einen Absatz ein weiterer Absatz eingefügt werden soll.

Eine längere Schreibweise für o.g. Code ist diese hier mit der bind-Methode:

[code language=“js“]
$("p").bind("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

Die Lösung, damit Event Listener auch auf hinzugefügten Inhalt funktionieren, ist die live-Methode:

[code language=“js“]
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

Jetzt kann man auch auf Another paragraph! klicken und bekommt einen weiteren Absatz.

Übrigens ist diese live-Methode auch die Lösung, um in seinem selbst entworfenen Widget im neuen Admin-Panel (seit WordPress Version 2.8 ist die Widget Administration überarbeitet) Events per JQuery jederzeit benutzen zu können. Das Problem ist ansonsten nämlich, dass man das per Drag & Drop hinzugefügte Widget-Administrationspanel erst abspeichern musste, ehe JQuery-Events funktionieren.

CSS Attribut Selektoren

Computer, , ,

Da schreibt man im letzten Artikel etwas über Regexp-Selektoren in JQuery und meint damit ein Problem zwar etwas umständlich, aber elegant gelöst zu habe. Einen Tag später allerdings stellt man fest, dass man den Umweg über JQuery gar nicht hätte gehen müssen, sondern gleich auf Attributbedingte Formate (wie es bei SELFHTML so schön deutsch heißt) hätte setzen müssen.

Ein HTML-Auszug sieht so aus:

[sourcecode lang=“html“]
<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!– … –>
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
[/sourcecode]

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

[sourcecode lang=“css“]
td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.

Regexp Selektor in JQuery

Computer, , ,

Auf dieser Seite hat James Padolsey eine äußerst hilfreiche Funktion für JQuery vorgestellt. Zwar ist es mit dem CSS3 Attribut-Selektor möglich elemtentare regulärer Ausdrücke zu formulieren, aber diese JQuery-Funktion ist schon sehr fein:
[sourcecode language=“jscript“]
jQuery.expr[‚:‘].regex = function(elem, index, match) {
var matchParams = match[3].split(‚,‘),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(‚:‘)[0] : ‚attr‘,
property: matchParams.shift().replace(validLabels,“)
},
regexFlags = ‚ig‘,
regex = new RegExp(matchParams.join(“).replace(/^\s+|\s+$/g,“), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
[/sourcecode]

Ein paar Beispiele wie die Funktion benutzt werden kann:
[sourcecode language=“jscript“]
// Wählt alle Elemente aus, deren ID mit einem Vokal anfangen:
$(‚:regex(id,^[aeiou])‘);

// Wählt alle DIVs mit Klassen aus, die Zahlen enthalten:
$(‚div:regex(class,[0-9])‘);

// Wähle alle SCRIPT tags aus, die jQuery im src enthalten:
$(’script:regex(src,jQuery)‘);
[/sourcecode]
Bei der Benutzung ist darauf zu achten, dass Backslashes im regulären Ausdruck durch doppelte Backslashes ersetzt werden müssen (bspw. ^\w+$ -> ^\\w+$). Zudem wird nicht zwischen Groß- und Kleinschreibung unterschieden – ist also case insensitive.

Die Funktion lässt sich auch für CSS einsetzen:
[sourcecode language=“jscript“]
// Wähle alle Elemente mit einer Weite zwischen 100 und 300 aus:
$(‚:regex(css:width, ^[1-3]\\d{2}px$)‘);

// Wähle alle DIVs aus, die NICHT als Block angezeigt werden:
$(‚div:not(:regex(css:display, ^block$))‘);
[/sourcecode]