kostenloser Webspace werbefrei: lima-city

Absoluter "Pfad" zu einem Element jQuery

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   makawa

   makawa hat kostenlosen Webspace.

   21:20, 20.11.2012

   Hallo alle zusammen,
   ich habe mir in den letzten Tagen das Kango Framework angeschaut, mit dem man Javascript Code (auf jQuery Basis) in native Browser Add-ons umwandeln kann. Nun möchte ich darin ein Programm schreiben was beim klick auf einen Button (auf einer bestimmten Website) eine Aktion durchfürt. Theoretisch geht das ja mit
   

   $("#id").click(function() {
   alert("Hallo")
   });

   
   Das funktioniert in einem HTML Dokument super aber nicht in Kango. Dort funktioniert aber:
   

   $(document.body).click(function() {
   alert("Hallo")
   });

   
   Daraus schliese ich das ich die ID des Elements mitsamt document.body angeben muss. Meine frage ist nun wie ich dass in Javascript mit JQuery realisiere.
   
   Vielen Dank für eure Antworten schonmal im Vorraus
   makawa

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   21:40, 20.11.2012

   Könnte es sein, dass dein Code ausgeführt wird, bevor der DOM vollständig geladen wurde?
   Funktioniert es so?

   $(function() {
   	$('#id').click(function() {
   		alert('Hallo');
   	});
   });

4. g****e

   22:42, 20.11.2012

   hackyourlife schrieb:
   Funktioniert es so?

   $(function() {
   	$('#id').click(function() {
   		alert('Hallo');
   	});
   });

   
   Ne frage, würdest du so nicht die Funktion als Selektor an Sizzle übergeben? Ich glaube solides Javascript an sich reicht:
   

   document.addEventListener( 'load' , function() {
   	$('#id').click(function() {
   		alert('Hallo');
   	});
   });

   
   Oder halt jQuery typischer:
   

   $(document).ready( function() {
   	$('#id').click(function() {
   		alert('Hallo');
   	});
   });

   
   
   Ich hab das noch nie probiert der SelectEngine eine Funktion zu übergeben, aber ich bin nicht sicher, ob das so gut funktioniert, oder fehlt mir da nur die Erfahrung?^^
   
   Liebe Grüße

5. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   7:53, 21.11.2012

   ggamee schrieb:
   Ich hab das noch nie probiert der SelectEngine eine Funktion zu übergeben, aber ich bin nicht sicher, ob das so gut funktioniert, oder fehlt mir da nur die Erfahrung?^^

   Dir fehlt die nötige Lust die Dokumentation von jQuery durchzulesen
   
   Dort steht:

   $(document).ready(function() {
     // Handler for .ready() called.
   });

   Which is equivalent to calling:

   $(function() {
    // Handler for .ready() called.
   });

   Ansonsten mal hier weiterlesen, damit du weißt, was du alles an

   $()

   übergeben kannst / darfst und welchen Effekt das hat.

6. g****e

   8:39, 21.11.2012

   hackyourlife schrieb:
   Ansonsten mal hier weiterlesen, damit du weißt, was du alles an

   $()

   übergeben kannst / darfst und welchen Effekt das hat.

   
   Danke =) (oder halt zu wenig Zeit, bzw viel zu viel zu tun für die Doku^^ ich schau bei Lima rein als Pause )
   
   Gut, dann gehen alle 3 Möglichkeiten :)
   Liebe Grüße
   
   Beitrag zuletzt geändert: 21.11.2012 8:45:14 von ggamee
7. Autor dieses Themas

   makawa

   makawa hat kostenlosen Webspace.

   16:08, 21.11.2012

   hackyourlife schrieb:
   Könnte es sein, dass dein Code ausgeführt wird, bevor der DOM vollständig geladen wurde?
   

   
   Ich hab es nun mal ausprobiert mit $(function() { }); funktioniert aber auch nicht. Ausserdem habe ich ein bisschen in der Kango Doku gesucht. Dort gibt es ein Beispeil zum manipulieren des DOM, indem auch das click Event abgefragt wird. Hier mal der Code:
   

   var tree = $(document.createElement('img')).attr({
           src: 'http://kangoextensions.com/misc/tree.png',
           title: 'Christmas tree'
   }).css({
           position: 'absolute',
           top: '10px',
           left: document.body.clientWidth - 280 + 'px',
           'z-index': '10000'
   }).appendTo(document.body);
   
   tree.click(function() {
           alert('Tree click');
   });

   Aufgrund von

   appendTo(document.body);

   bin ich auch auf die Idee mit der absoluten angabe inklusive document.body gekommen.

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?