18

jQueryハイパーリンク-href値？文1]

jqueryとアンカー要素にアタッチされたクリックイベントを使用して問題が発生しています。[1]：jQueryハイパーリンク-href値？「この」SOの質問は重複しているようであり、受け入れられた回答は問題を解決していないようです。これが悪いSOエチケットならごめんなさい。

私の.ready（）関数には、次のものがあります。

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
        Function_that_does_ajax();
        });

そして私のアンカーは次のようになります：

<a href="#" id="id_of_anchor"> link text </a>

ただし、リンクをクリックすると、ajax機能は必要に応じて実行されますが、ブラウザーはページの一番上までスクロールします。良くない。

追加してみました：

event.preventDefault();

ajaxを実行する関数を呼び出す前に、それは役に立ちません。私は何が欠けていますか？

明確化

私はすべての組み合わせを使用しました

return false;
event.preventDefault(); 
event.stopPropagation();

jsajax関数の呼び出しの前後。それでも一番上までスクロールします。

4

8 に答える 8

18

それはうまくいくはずです、あなたは「前」が何を意味するのか明確にできますか？あなたはこれをしていますか？

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});

それが機能しない場合、あなたは何か間違ったことをしていて、より多くのコードを見る必要があるという意味でそれは機能するはずだからです。ただし、完全を期すために、これを試すこともできます。

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});

編集

これがこの動作の例です。

2つのリンクはこのコードを使用します：

$('#test').click(function(event) {
    event.preventDefault();
    $(this).html('and I didnt scroll to the top!');
});

$('#test2').click(function(event) {
    $(this).html('and I didnt scroll to the top!');
    return false;
});

そしてあなたが見ることができるようにそれらはうまく働いています。

于 2009-06-30T03:32:22.313 に答える
5

ティラルが上で言ったように：

<a id="id_of_anchor" href="javascript:void(0)" />

アンカータグを正しく表示し、javascriptを使用してクリックハンドラーを割り当てることができ、スクロールしません。このため、広く使用しています。

于 2010-10-22T21:16:26.343 に答える
5

javascript：void（0）;を使用できます。hrefプロパティで。

于 2009-07-04T05:14:04.023 に答える
3

この質問は、 jQuery Eventオブジェクトの正しい関数を使用していると述べられているため、よりデバッグ的な演習になります。

jQueryイベントハンドラーでは、次の2つの基本的なことのいずれかまたは両方を実行できます。

1.要素のデフォルトの動作を防止します（この場合、A HREF = "＃"）：

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

2.イベントが周囲のHTML要素のイベントハンドラーに伝播するのを停止します。

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

期待どおりの動作が得られないため、一時的にajax呼び出しを削除し、フォーム値の設定などの無害なコードに置き換えるか、-shudder- alert（ "OK"）を実行して、まだ上にスクロールするかどうかをテストする必要があります。 。

于 2009-06-30T05:35:38.680 に答える
2 
$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}
于 2009-06-30T03:32:19.643 に答える
2

ただ失う

href="#"

htmlタグでは...それがWebページを「ジャンプアップ」させる原因です。

<a id="id_of_anchor"> link text </a>

追加することを忘れないでください

cursor: pointer;

あなたのaのcssに、マウスオーバーのリンクのように見えるようにします。

幸運を。

于 2013-12-10T17:24:59.933 に答える
0

以下のコードで大いに役立ちました。ありがとうございました！

        $(document).ready(function() {
        $(".dropdown dt a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").toggle('slow');
        });           
        $(".dropdown dd ul li a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").hide();
        });
    });
于 2011-10-27T16:58:07.460 に答える
0

私は同じ問題を抱えています。

要素をDOMに追加する前にイベントをバインドすると発生すると思います。

于 2010-04-05T11:08:33.697 に答える