Jquery Funktion wird nicht ausgeführt

[Tim]

Hallo,

über ein onclick Ereignis, mit dem ich 2 Parameter wieter gebe, will ich die Funktion "name_der-funktion" aufrufen, aber sie "antwortet" nicht.

  
<script type="text/javascript">  
$(document).ready(function(){  
/* Hier der jQuery-Code */  
function name_der_funktion(wert1,wert2) {  
alert(wert1 + '-' + wert2);  
}  
});  
</script>  

Warum? Was mache ich falsch?

Tim

[Gunnar Bittersmann]

@@Tim:

nuqneH

über ein onclick Ereignis

Davon ist in deinem gezeigten Code nichts zu sehen.

Was mache ich falsch?

Die Problembeschreibung.

Qapla'

[molily]

Hallo,

über ein onclick Ereignis, mit dem ich 2 Parameter wieter gebe, will ich die Funktion "name_der-funktion" aufrufen, aber sie "antwortet" nicht.

Wie sieht der onclick-Code aus? Nutzt du jQuery, um den Event-Handler zu registrieren? (Solltest du bestenfalls.)

<script type="text/javascript">
$(document).ready(function(){
/* Hier der jQuery-Code */
function name_der_funktion(wert1,wert2) {
alert(wert1 + '-' + wert2);
}
});
</script>

>   
> Warum? Was mache ich falsch?  
  
Du verschachtelst hier zwei Funktionen. Die äußere ist der namenlose Event-Handler für `$(document).ready()`{:.language-javascript}, die innere ist name\_der\_funktion.  
  
Die innere Funktion ist privat, d.h. nur innerhalb der äußeren Funktion zugänglich. Dort, wo sie verfügbar ist, sehe ich keinen Aufruf, also wird sie nie aufgerufen. Sie ist nicht global. Versuchst du vielleicht, sie global aufzurufen? Über `<a onclick="name_der_funktion(…)">`{:.language-html} oder ähnlich?  
  
Hast du einmal in die JavaScript-Fehlerkonsole des Browser geschaut? Dort müsst eine entsprechende Fehlermeldung stehen.  
  
So ginge es zum Beispiel:  
  
~~~javascript
$(document).ready(function() {  
  
  function testfunktion(wert1, wert2) {  
    alert(wert1 + '-' + wert2);  
  }  
  
  // Event-Handler registrieren  
  $('#irgendeinElement').click(function() {  
    testfunktion('X', 'Y');  
  });  
  
});

Ich vermute, du vermischt noch alten JavaScript-Code, der direkt ins HTML eingebettet ist, mit neuem, auf jQuery basierenden Code. Gemäß dem Konzept »Unobtrusive JavaScript« sollten HTML und JavaScript getrennt werden. Das ist mit jQuery auch gut möglich.

Mathias

[Tim]

Wie sieht der onclick-Code aus? Nutzt du jQuery, um den Event-Handler zu registrieren? (Solltest du bestenfalls.)

Du verschachtelst hier zwei Funktionen. Die äußere ist der namenlose Event-Handler für $(document).ready(), die innere ist name_der_funktion.

Die innere Funktion ist privat...,

So ginge es zum Beispiel: ...

Ich vermute, du vermischt noch alten JavaScript-Code, der direkt ins HTML eingebettet ist, mit neuem, auf jQuery basierenden Code

Wow!

Was für eine tolle Antwort.

Die bringt mir richtig viel, wenn ich sie auch norgen erst mal genauer studieren muß. Aber soviel steht schonmal fest, Deine Vermutungen waren genau richtig. Ich vermische alten JS-Code mit Jquery. Und habe keinen Schimmer davon, daß man die private Funktion erstal zugänglich machen muß.

Wie gesagt, ich muß das morgen erstmal studieren, bin mir auch sicher, da0ß noch Fragen übrig bleiben, aber Deine Antwort motiviert mich, an meinem Code weiter zu arbeiten. Danke (bis hierhin) dafür!

Tim

[molily]

Hallo!

Und habe keinen Schimmer davon, daß man die private Funktion erstal zugänglich machen muß.

Eine globale Funktion zu deklarieren ist einfach – verpacke sie *nicht* in einen Aufruf von $(document).ready(…).

<script>
function ichBinEineGlobaleFunktion() {}
</script>

Die reine Deklaration einer Funktion muss nicht zwangsläufig zum Zeitpunkt des fertigen Einlesens des Dokuments ausgeführt werden (das ist, was $(document).ready(…) macht). Sie kann auch schon vorher erzeugt werden. Aufgerufen wird sie ohnehin erst beim Klick.

Empfehlenswert ist das wie gesagt nicht, besser ist die Verwendung von jQuery für das Event-Handling. Dann müssen keine globalen Funktionen erzeugt werden.

Grüße
Mathias

[Tim]

Hi Matthias,

Eine globale Funktion zu deklarieren ist einfach – verpacke sie *nicht* in einen Aufruf von $(document).ready(…).

<script>
function ichBinEineGlobaleFunktion() {}
</script>

Und dann kann ich sie "ganz normal" über einen "nativen" onclick-Handler aufrufen?

Empfehlenswert ist das wie gesagt nicht, besser ist die Verwendung von jQuery für das Event-Handling. Dann müssen keine globalen Funktionen erzeugt werden.

Ok, dann möchte ich das so machen.
Mein Problem ist dann aber, wie übergebe ich zu jedem (z.b.) Button einige Parameter? Oder ist das dann tatsächlich so gedacht, daß ich jedem Button eine ID zuordne und zu jeder ID eine click-Funktion deklariere?

Tim

[molily]

Hallo,

function ichBinEineGlobaleFunktion() {}
Und dann kann ich sie "ganz normal" über einen "nativen" onclick-Handler aufrufen?

Ja, das wäre in dem Fall möglich.

Mein Problem ist dann aber, wie übergebe ich zu jedem (z.b.) Button einige Parameter? Oder ist das dann tatsächlich so gedacht, daß ich jedem Button eine ID zuordne und zu jeder ID eine click-Funktion deklariere?

Jedem Button einen individuellen Handler zuzuweisen wäre unschön, ineffektiv und würde viel sich wiederholenden Code produzieren. Ein flexibler Handler für alle Buttons ist besser.

Die nötige Information für das Script bringst du am besten im HTML unter. Dazu eignen sich allgemein die Attribute id, class sowie data-Attribute. Im JavaScript kannst du diese Information dann auslesen.

HTML:

<button class="myButton" data-id="123">Mach was mit ID 123</button>  
<button class="myButton" data-id="456">Mach was mit ID 456</button>

JavaScript mit jQuery:

$(document).ready(function() {  
  
  // Registriere ein Click-Handler für alle buttons  
  $('.myButton').[link:http://api.jquery.com/click/@title=click](function([link:http://api.jquery.com/category/events/event-object/@title=event]) {  
    // Greife auf das angeklickte Element zu, verpacke es in ein jQuery-Objekt:  
    var target = $([link:http://api.jquery.com/event.currenttarget/@title=event.currentTarget]);  
    // Lese das data-id-Attribut aus:  
    var id = target.[link:http://api.jquery.com/data/@title=data]('id');  
    alert(id);  
  });  
  
});

Es gibt natürlich noch andere, ggf. bessere Möglichkeiten, je nachdem, wie dein konkreter Anwendungsfall aussieht. Data-Attribute sind hier die allgemeinste Weise, um Informationen für JavaScripte im HTML unterzubringen. Diese data-Attribute sind nicht sichtbar und haben auch sonst keine Auswirkungen, wenn sie nicht per JavaScript ausgelesen werden.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Diese data-Attribute sind nicht sichtbar und haben auch sonst keine Auswirkungen, wenn sie nicht per JavaScript ausgelesen werden.

Nicht?

[data-id="123"] { transform: scale(4) }

SCNR.

Qapla'

[Tim]

...

Mathias

Hallo Mathias,

danke für Deine ausführliche Antwort und die Mühe, die Du Dir dabei gemacht hast!
Sie hat mich nicht nur bei meinem aktuellen Anwendungsfall zur Lösung geführt sondern darüber hinaus noch bei einem weiteren Problem auf die richtige Spur geführt. Klasse!

Schönen Tag und Gruß, Michael