Javascript関数の結果HTMLページをリロード:なぜですか？

StackOverflow https://stackoverflow.com/questions/1088686

質問

ピう...

目的:

  • いては、HTMLテキスト入力フィールドのようなコマンドラインで入力します。

  • 順序付けのHTMLのリストは、最近5コマンド.クリックの最後のコマンドをこのリストには追加のコマンドライン入力テキストフィールドに、それぞれのコマンドのため、再実行または変更します。

  • 順序付けのHTMLのリストに含まれて結果セットです。をクリックするIDのこのリストのうち、それぞれのIDにコマンドライン入力になります。

HTML(DHTML): に動作す:クリックした場合は、リンクのコマンドライン入力テキストfields最近のコマンドです。

<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>

Javascriptファイル: など:クリックした場合は、リンクのコマンドライン-入力テキストが人口に、それぞれの値になることは間違いあり)、そのようにHTMLページがリローデッドは、テキスト入力フィールドおよびすべて人口動的にリストとなります。

    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;});
}

そこで問題: 以外の潜在的なJavascriptの構文エラーは、何の原因となるブラウザの再読み込みます。

役に立ちましたか？

解決

変更

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

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

との関数では、呼び出し

evt.preventDefault();

他のヒント

両方のケースでは、あなたがリンクをクリックして、デフォルトの機能を解除するために何もしない。

プレーンなHTMLの例では、ページの最上部へのリンクが続いている。

あなたが指定されていない第二の例のためのhref属性がどのように見えるか、それが何であれ、それが続くされます。

http://icant.co.uk/articles/pragmatic-progressiveを参照してください。 -enhancement / のイベントキャンセルすると良いイベントデザインの良い説明のために。いくつかのjQueryの具体的なガイダンスのために http://docs.jquery.com/Tutorials:How_jQuery_Works のを参照してください。

あなただけで、リンク先のURLに従っているようです。デフォルトのクリックアクションを防ぐことはできませんので、それは、次のとおりです。

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

また、あなたは#始まるのhrefを設定することができ、または（代わりに使用<a>）すべてで<span style="cursor:pointer">要素を使用していない - それはもちろんの本当のリンクはない場合

。

これは、基本的には、イベントがキャンセルに関連しています... これを試してください：

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

ここでは他の回答がイベントをキャンセルについての優れた点を作りながら、あなたのJavaScriptが実行されてから、あなたのイベントキャンセリングコードを妨げるエラーが含まれている場合、あなたはまだ問題に実行されます。 （あなたは、たとえば、ならケースがあるかもしれないとして、のあなたのコードのデバッグの

追加の予防措置として、私は強くあなただけのスクリプトを起動するリンク上のありませんを使用href="#"をお勧めします。代わりに、void演算子を使用します：

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

この理由は次のとおりです。イベントがキャンセルされていない場合、ブラウザがhref属性で指定されたURLをロードしようとします。 javascript:「プロトコル」は、その値がundefined のでない限り、代わりに添付のコードのの値を使用するようにブラウザに指示します。 void演算子はそう、undefined に返すように明示的に存在していますブラウザは、既存のページにとどまる - ノーリロード/リフレッシュして - あなたのスクリプトのデバッグを継続することができます。

。 （あなたはまだ非JSクライアント用の「代替」URLを持つリンクに接続コードでイベントをキャンセルする必要があるでしょうが）

これはまた、JS-リンクのみのために全体のイベントキャンセリング混乱をスキップすることができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top