HTML要素の表示非表示がうまく実装できません

Question

HTML5

HTMLでaタグのクリックで要素の表示非表示を切り替えようとしています。

<div class="box">
    <div class="box3">
        <a href="" class="setting_btn fa fa-search"></a>
    </div>
    <div class="setting_item">
        <li>
            <a href="">表示非表示</a>
        </li>
　　</div>
</div>

$(function() {
    $('.setting_btn').on('click', function() {
        $('.setting_item').hide('slow');
    });
});

fa fa-searchはアイコンになります。

現象
JSのイベントが発生しない。Aタグ部分をクリックすると、ページが再読み込みされる。
アイコンにカーソルを当てると上記のHTMLページのURLが表示される。

やりたいこと
setting_btn で要素の表示非表示を起こすイベントを発生させたいです。
まずはクリックで非表示にするよう実装したい。

aタグのhrefには何も設定していませんが、なぜURLが適用されてしまうのか調べても分からず、解決できないためご回答いただけますと幸いです。

宜しくお願いいたします。

Answer 1

下記で解決。質問の記述で解決できない場合は試してみてください。
$(document).on('click', '.setting_btn', function(e) {
e.preventDefault();
});

Comments

[yambejp]

クラスのついたsetting_btnアンカーは動的につくっているのでしょうか？
もしそうなら質問に少しでもその情報がないとその回答を
導くことは困難ですね

Answer 2

同じページを開き直してしまいます。

yambejpさんのコードはちゃんと動作しています、、おそらくイベントを拾ってない気がします。

$('.setting_btn').on('click', function(e) { // <- 引数に e 渡してます？
 ...
});

表示非表示を切り替えたいのであれば hide を toggle にすればよいです。

$(function() {
    $('.setting_btn').on('click', function(e) {
        e.preventDefault();
        $('.setting_item').toggle('slow');
    });
});

Comments

[seastar]

ありがとうございます。
引数確認しましたが、忘れていませんでした。
以下のように書いたところイベントを拾えましたが、他に作成したイベントはagumon様の書き方で拾うことができています。。。
$(document).on('click', '.setting_btn', function(e) {
e.preventDefault();
});

[agumon]

やりたいことができたということでしょうか？
解決できてないのであれば質問内容を明確にしていただけますでしょうか。

[seastar]

すみません。解決できたので、上記の内容でこの質問を閉じさせていただきます。

Answer 3

イベントを拾って、無効化してください

$(function() {
    $('.setting_btn').on('click', function(e) {
        e.preventDefault();
        $('.setting_item').hide('slow');
    });
});

Comments

[seastar]

ご回答ありがとうございます。
修正してみましたが、同じページを開き直してしまいます。
おそらく、イベントは回答の内容で正しいかと思いますが、href=""に設定しているaタグがルートを設定したような挙動になっているようです。
処理の流れをもう少し自分で調べてみます。ありがとうございます。