a href mit javascript im FF

[Padarom]

Hallo,
nachdem ich meine Seite im Firefox getestet habe, habe ich ein entscheidendes Problem festgestellt.
Meine Links funktionieren dort nicht:

<a href='javascript:Forgot();'>Passwort vergessen?</a>
<a href='javascript:New()'>Noch kein Account?</a>
<script>
// NeuerText ist selbstverständlich als Variable definiert.
function New(){
   VorigerInhalt = document.all.LoginForm.innerHTML; 
   document.all.LoginForm.innerHTML = NeuerText; 
}
<script>

In allen getesteten Browsern funktioniert es (Chrome, Opera, sogar IE), nicht jedoch im Firefox.
Als ich nach dem Fehler googelte, fand ich viele Einträge, jedoch half mir nichts.
Weder <a href='' onclick=''> (Was die Seite sowieso neulädt, anstatt Javascript auszuführen, und das nicht nur im Firefox), noch
$("#link").click(function(){ /* */ });

Ich hoffe jemand kann sich dem Problem annehmen und mir kurz eine Hilfstellung geben.
Ich würde übrigens nur ungern den derzeitigen Code in ein Format umändern, in dem ich die anderen Formulare in einem neuen Dokument habe - Dann könnte ich Javascript ja direkt weglassen.

Danke im Voraus.

Mit freundlichen Grüßen
Padarom

 

[threadi]

Gibt es denn einen JavaScript-Fehler beim Anklicken?

Wie oft ist der Name "LoginForm" bei form-Elementen vorhanden? Gibt es evtl. auch eine ID mit der selben Bezeichnung?

 

[Padarom]

Es gibt keinen Fehler, es passiert einfach absolut nichts im Firefox.
Ich sehe zwar in der unteren linken Ecke, dass der Link javascript ausführen möchte, aber beim Anklicken passiert - wie erwähnt - gar nichts.
LoginForm ist nur einmal auf der gesamten Seite vorhanden. Dabei ist LoginForm auch die ID, keine Klasse.

 

[threadi]

Hast Du einen Link zur Seite, wo man sich das anschauen kann?

 

[Tronjer]

Geht doch:

<a id="my_id" href="#">Klick mich</a>




<script>
$('#my_id').click(function(e){
	e.preventDefault();
	alert('Hello World');
});
</script>

 

[Padarom]

@Tronjer:
So habe ich das ebenfalls bereits versucht, allerdings nicht mit Alert, sondern mit der eigenen (oben abgeschriebenen) Funktion.
@threadi:
Natürlich. Cleared to Land - Home -> Control Panel, dort die Links.

 

[Tronjer]

@Tronjer:
So habe ich das ebenfalls bereits versucht, allerdings nicht mit Alert, sondern mit der eigenen (oben abgeschriebenen) Funktion.

Dann eben so.

<a id="my_id" href="#">Klick mich</a>

<script>
$('#my_id').click(function(e){
    e.preventDefault();
    var myText = 'Neuer Text';
    $(this).html(myText);
});
</script>

Du benötigst einen Selektor, blockierst mit preventDefault() das Standardverhalten des Links und kannst anschließend die gewünschte Funktion ausführen.

 

[Padarom]

Diese Methode funktioniert bei mir (selbst wenn ich es testweise 1 zu 1 kopiere) in keinem Browser.
Edit this Fiddle - jsFiddle - Beim Klick passiert leider gar nichts (zumindest bei mir?)

 

[Tronjer]

Dann hast du ein anderes Problem oder jQuery nicht eingebunden. Ich habe es eben noch mal im FF ausprobiert und bei mir funktioniert es.

 

[Kizetsu]

Hi,

wahrscheinlich liegt es wirklich am Fehlen der Einbindung von jquery.

$("#ID").function etc. ist kein standard javascript sondern jquery und benötigt die entsprechende js-datei.


Also als Kurzbeschreibung:
Du brauchst die jquery-datei
z.B.:

<script type="text/javascript" src="jquery.min.js"></script>

dann deine js-Funktion:
z.B.:

<script type="text/javascript>
...
  $("#href_id").click(function(e) {
    // Inhalt der Funktion wie z.B. das neuladen des Textes
    e.preventDefault  // Ganz wichtig, damit deine Seite NICHT neugeladen wird.
  });
</script>

Und zum schluss brauchst du deinen "button". Hier ist es egal ob du einen link oder etwas anderes nimmst. Ich nutze oft direkt Labels oder icons. Da du mit jquery das event auf die Id legst ist dem jquery-script komplett egal was das für ein html-tag ist.
z.B.:

<a href="#" id="href_id">Ich rufe eine jquery-funktion auf</a>

oder z.B.:

<label id="href_id">Ich kann auch eine jquery-funktion aufrufen<label>

Beide Varianten funktionieren (aber nicht gleichzeitig! wenn du beide in deine Datei packst wird standardmäßig entweder nur die letzte mit dieser ID funktionieren oder es gibt einen fehler und keine funktioniert).


Als Tipp am Schluss:
Da alle Browser verschieden mit dem Parsen der PHPs umgehen kann sollte man Funktionen wie Clicks in eine Funktion packen die vom documen-ready aufgerufen wird. Das klingt komplizierter als es ist. Hier erstmal zur Veranschaulichung das Script:

<script type="text/javascript">
$(document).ready(function() {
  add_events();
};

add_events() {
  $("#href_id").click(function(e) {
    // Inhalt der Funktion wie z.B. das neuladen des Textes
    e.preventDefault  // Ganz wichtig, damit deine Seite NICHT neugeladen wird.
  });
};
</script>

Zur Erklärung: Manche Browser (und ich glaube Firefox gehört dazu) zeigen die Seite bereits während des Parsens (also lesen) der PHP-Datei an. Das führt dazu, dass javascript auch direkt ausgeführt wird. Hier behelfen wir uns mit $(document).ready(). Diese vordefinierte Funktion von jquery führt alle beinhalteten Funktionen aus, sobald die Seite vollständig geladen ist.
Warum nun nicht direkt die Click-Funktion in die document-ready?
-> Weil dann der Click direkt ausgeführt werden würde aber wir wollen ja in diesem Moment nur die Funktion mit der ID koppeln.
Warum sollte man das so lösen?
-> Wenn man es nicht mit document-ready löst kann es sein, dass der Browser beim Parsen zum javascript kommt, die funktion der ID zuweisen will (die zu diesem Zeitpunkt noch nicht existiert weil das <a> oder <label> erst weiter unten im script stehen) und diese funktion dann nicht auf das Element angewendet wird. Somit bekommst du auch den Effekt, dass einfach nichts passiert beim drauf klicken oder er (falls du ein <a> verwendest) simpel den link ausführt.

LG