Javascript-Funktion führt zu HTML-Seite neu laden: warum?

Question

Newbie Frage ...

Das Ziel:

• Ich beabsichtige, einen HTML-Texteingabefeld als eine Art Kommandozeile eingegeben zu haben.

• Eine ungeordnete HTML-Liste zeigt die 5 letzten Befehle. Wenn Sie auf einen der letzten Befehle in dieser Liste klicken, sollte das Eingabefeld für die Befehlszeile mit dem entsprechenden Befehl ausgefüllt werden (um ihn erneut auszuführen oder zu ändern).

• Eine ungeordnete HTML-Liste enthält eine Ergebnismenge. Klicken Sie auf eine ID in dieser Liste, um die entsprechende ID in das Eingabefeld für die Eingabezeile zu bringen.

In HTML (DHTML): wie erwartet funktioniert: Wenn auf dem Link in der Befehlszeile Eingabetextfeld mit einem letzten Befehl gefüllt wird klicken.

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li> 

In Javascript-Datei: funktioniert nicht wie erwartet: wenn auf dem Link das Befehlszeileneingabe-Text-Feld mit dem entsprechenden Wert gefüllt wird, klicken (wie es sein soll), aber dann scheint es, als würde die vollständige HTML-Seite neu geladen, das Texteingabefeld und alle dynamisch gefüllten Listen werden leer.

function exec_cmd(cli_input_str) { 
// a lot of code ... 
// the code that should provide similar behavior as onclick=... in the DHTML example 
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;}); 
} 

Nun ist die Frage: Neben einem Potential Javascript (Syntax) Fehler, was der Browser die Seite neu zu laden dazu führen könnte?

Answer 1

ändern

$('.spa_id_href').click(function(){... 

zu

$('.spa_id_href').click(function(evt){...//notice the evt param 

und in der Funktion rufen

evt.preventDefault(); 

Answer 2

In beiden Fällen tun Sie nichts, um die Standardfunktion des Klickens auf einen Link aufzuheben.

Im einfachen HTML-Beispiel wird der Link zum Anfang der Seite gefolgt.

Sie geben nicht an, wie das href-Attribut für das zweite Beispiel aussieht, aber was auch immer es ist, es wird folgen.

Siehe http://icant.co.uk/articles/pragmatic-progressive-enhancement/ für eine gute Erklärung der Event Cancelling und gutes Event-Design. Eine spezielle jQuery-Anleitung finden Sie unter http://docs.jquery.com/Tutorials:How_jQuery_Works.

Answer 3

Es scheint, dass Sie nur der Link-Ziel-URL folgen. Das ist, weil Sie nicht über die Standardklickaktion verhindern:

e.preventDefault(); // `e` is the object passed to the event handler 
// or 
return false 

Alternativ können Sie a href beginnend mit # oder nicht verwenden <a> Element überhaupt (verwenden <span style="cursor:pointer"> statt) einrichten - wenn es kein echter Link ist Na sicher.

Answer 4

Während die anderen Antworten hier ausgezeichnete Punkte machen über Ereignisse Cancelling, werden Sie noch laufen in Probleme, wenn Ihr JavaScript Fehler enthält, die verhindern, dass Ihr Code zur Ereignisaufhebung ausgeführt wird. (Wie könnte der Fall sein, wenn Sie, sagen wir, Debuggen von Code.

Als zusätzliche Vorsichtsmaßnahme, empfehle ich Ihnen dringend nicht Verwendung href="#" auf Links, die nur Skripte auslösen. Verwenden Sie stattdessen die void Operator :

<a href="javascript:void(0)" onclick="...">...</a> 

der Grund dafür ist: wenn das Ereignis nicht abgebrochen wird, versucht der Browser die URL von dem href Attribute das javascript: „Protokoll“ teilt den Browser verwenden Sie stattdessen den Wert der gelieferten zu laden. Begleitcode un weniger als dieser Wert ist undefined. The void operator exists explicitly to return undefined, so bleibt der Browser auf der vorhandenen Seite - ohne Neuladen/Aktualisieren - und Sie können damit fortfahren, das Skript zu debuggen.

Dadurch können Sie auch das gesamte Event-Cancelling-Chaos für JS-only-Links überspringen (obwohl Sie Ereignisse in Code, der Links mit einer "Fallback" -URL für Nicht-JS-Clients zugeordnet ist, noch abbrechen müssen).

Answer 5

Es ist im Grunde auf ereignisbezogene Cancelling ... Versuchen Sie folgendes:

try { (
    e || window.event).preventDefault(); 
} 
catch(ex) 
{ 
/* do Nothing */ 
}