Jeder steht sicherlich irgendwann einmal vor dem Problem, dass er eine Layer, ein Menu oder sonsst etwas schließen muß, wenn man irgendwo anders hinklickt als auf das geöffnete Element.
jQuery bietet da eine sehr schöne Lösung an.

Angenommen man hat einen Layer mit der ID #Layer, und m&oul;chte darin klicken und machen was man will, jedoch wenn man ausserhalb des Layers klickt, soll dieses verschwinden.

Eine einfache Version würde wie folgende aussehen:

1
2
3
4
5
6
7

$('body').click(function() {
  $('#Layer').hide();
});
 
$('#Layer').click(function(event){
     event.stopPropagation();
});

Ich verwende sehr gerne den "bind" Befehl von jQuery, da würde das ganze in etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11

$('body').bind({
	click: function() {
		$('#Layer').hide();
	}
});
 
$('#Layer')bind({
	click: function(event){
     		event.stopPropagation();
	}
});

Auf den ersten Blick macht das ganze nicht viel mehr Sinn, doch, bietet der "bind" Befehl die Möglichkeit gleich mehrere EventHandler zu definieren und des Weiteren kann man mit der "unbind" Funktion die Handler ganz leicht wieder entfernen, falls man diese nicht mehr benötigt.

Heute habe ich einige Zeit, mit einem jQuery Problem verbracht. Als einfaches Beispiel soll folgenden Aufgabe dienen:

Es sollen alle Links in einer Seite mit einem "onclick" versehen werden, der den Index des Links per "alert" ausgibt.