sb log

Link-Klicks abfangen mit jQuery

Eins der gängigen Probleme oder Hürden ist es, eine Aktion auszulösen wenn man einen Link klickt. Ob nun für AJAX oder ein einfaches Update eines DOM-Elements (= ein HTML Element in der Webseite). jQuery bietete hier für eine einfache “click” Funktion die folgendermaßen aufgebaut ist:

?View Code JAVASCRIPT
$(document).ready(function() {
 
$("test").click(function() { return false; });
 
});
?View Code JAVASCRIPT
$(document).ready(function() {
 
$("test").click(function() { return false; });
 
});

Diese Code macht erstmal nicht viel. Sinngemäß übersetzt bedeutet er: wenn das Element mit der ID “test” geklickt wurde, gebe nichts zurück und führe auch nicht das eigentliche Link-Ziel aus. Falls du also auf das Element “test” klickst, passiert gar nix. Dies benötigst du damit zB. die Seite nicht neu lädt, falls das Element geklickt wird. Probier es aus. Setze alternativ den “false” Wert auf “true” und du siehst was ich meine.

Klettern wir eine Stufe höher auf unserer jQuery Leiter und probieren es mit diesem Codeschnipsel:

?View Code JAVASCRIPT
$(document).ready(function() {
 
$("#test").click(function() {
 $("#test2").hide(); 
return false; });
 
});

Schon wieder ein return false? Klar! Wir wollen nicht den Link aufrufen sondern einfach unser Element mit der ID “test2″ verstecken (= “hide()”). Das Element muss dafür natürlich in deinem Quellcode vorkommen. Um den Link selbst zu verstecken auf den du klickst, machen wir das hier:

?View Code JAVASCRIPT
$(document).ready(function() {
 
$("#test").click(function() { $(this).hide(); return false; });
 
});

this” bedeutet “das Element vom Anfang der Codekette”. Versuch es und du siehst den Unterschied. Jetzt sprechen wir genau das Element an was wir mit $(”#test”) definiert haben, also “test”. Im Codeblock davor ändern wir ein anderes Element, nicht dasselbe. Verstanden?

Das waren erstmal die Basics. Nun kannst du noch viel mehr mit diesem Wissen machen. Du könntest andere Elemente hereinfliegen lassen, aus- und einblenden, den Style ändern oder AJAX-Requests (cooles Wort :D) absetzen. Viel Spaß beim Link-Klick abfangen! ^^

Hat es geklappt? Schreib mir und zeig uns dein stolzes Kunstwerk!

geschrieben am 08:55:56 | gespeichert unter jquery

:, ,

Verdammt ruhig hier. Hinterlasse hier... etwas!?

Suchste was? Findste was!

Nur original mit diesem Suchformular :D

Noch immer NIX gefunden? Schreib mir und ich versuche dein Problem zu lösen! Oder auch nicht.