jQuery - Verständnisproblem

[k3nguruh]

Hallo,

ich möchte meine private Homepage nach langer Zeit mal wieder auf den Stand der Dinge bringen und will dazu jQuery einbinden.
Ich habe bereits einige jQuery "Sachen" Local testen können und eigentlich auch vieles gelesen.

Trotzdem erschliessen sich für mich einige Sachen nicht ganz.
Vll. stehen die Antworten auch auf der jQuery Seite, aber trotz Googleübersetzung bin ich nicht schlauer . Von den vielen Tutorials mal abgesehen, wo halt jedes wieder was anderes nimmt....

Worin besteht der Unterschied, bzw. was ist besser bzw. sollte man nehmen?

<a href="#" class="class">LinkText</a>
<span class="class">LinkText2</span>

Eigentlich passiert überall das gleiche. Wenn ich klicke löst der Alert aus.

// 1 a)
$('body').on('click', '.class',  function(event) {
    event.preventDefault();
    $(this).fnTest();
});

// 1 b)
$('.class', 'body').on('click', function(event) {
    event.preventDefault();
    $(this).fnTest();
});

// 1 c)
$('.class').on('click', function(event) {
    event.preventDefault();
    $(this).fnTest();
});

// Function zu 1 a, b, c
;(function($) {
    $.fn.fnTest = function() {
        return this.each(function() {
            alert(1);
        });
    }
})(jQuery);

oder:

// 2 a)
$('.class').fnTest();

// Function zu 2 a
;(function($) {
    $.fn.fnTest = function() {
        return this.each(function() {
            $(this).on('click', function(event) {
                event.preventDefault();
                alert(1);
            });
        });
    }
})(jQuery);

Bei einer Antwort wäre es cool, wenn eine kurze Erklärung (warum so) dabei wäre , damit ich das vll mal raffe...

Thx

 

[BoR]

Hallo,
grundsätzlich sieht das Schema wie folgt aus:

.on( events [, selector ] [, data ], handler(eventObject) )

Wenn der Selektor weggelassen wird, bezeichet man den Event Handler als direkt verbunden. Heisst, der Handler wird jedes Mal aufgerufen sobald ein besagtes Ereignis auf dem ausgesuchten Element auftritt.
Ist ein Selektor vorhanden, wird der Event Handler als zugeordnet bezeichnet. Hierbei wird der Handler nicht aufgerufen, wenn das Ereignis direkt auf dem verbundenen Element auftritt, sondern nur auf den Nachfahren auf den der Selektor passt.

Für 1a:
Es wird nur reagiert, wenn der Selektor .class ein Nachfahre des Elements body ist.

Für 1b:
Es wird bei Klick auf .class UND body reagiert, welches keinen Sinn macht, da du ja kein Klick-Ereignis auf dem Body haben möchtest. Also ist 1c hier vollkommen ausreichend.

Wenn du ein einfaches Klick-Ereignis erstellen willst, mit Elementen, die im DOM bereits vorhanden sind, reicht auch die gekürzte Variante:

$(selector).click(handler(eventObject)

Sollte deine Klasse nicht unregelmäßig über das gesamte Dokument verteilt sein, ist es ratsam nicht einfach nur eine Klasse anzugeben, sondern gleich noch den Vorfahren, idealer Weise sollte dieser eine ID besitzen. Umso effizienter wird der DOM-Baum durchsucht. Eine ID kann nur einmal vorkommen. Sobald das Element dann gefunden wurde, wird die Suche beendet. Bei einer Klasse kann sich ein weiteres Element noch im hintersten Winkel des Markup befinden und somit wird die Suche fortgesetzt, bis auch das letzte Element überprüft wurde.

z.B.

<div id="vorfahre">
    <a class="class" href=""></a>
</div>

Gesamtes Dokument wird durchsucht:

$(".class").click(handler(eventObject))

Es wird nach dem Vorfahren gesucht und darin dann das gesuchte Element. Da der Vorfahre eine ID hat, kann nach dem Container die Suche abgeschlossen werden:

$("div#vorfahre .class").click(handler(eventObject))

Ist der Container der direkte Vorfahre, kannst du das auch angeben und die Suche beschleunigen, vorausgesetzt, die Unterteilung im Vorfahren selbst verzweigt sich noch einmal mehr:

$("div#vorfahre > .class").click(handler(eventObject))

Ich hoffe dir helfen einige Ausführungen weiter.

Gruß Lars