web-dev-qa-db-ja.com

アンカーのjqueryクリックイベント

ここに私が持っているhtmlのスニペットがあります：

<div id="tag-cloud-widget">  
    <div class="content">  
        <a href="#" rel="1" class="cloud-element" data-tag-id="10" style="font-size: 12px; color: rgb(205, 236, 222); ">T1</a>  
        <a href="#" rel="1" class="cloud-element" data-tag-id="1" style="font-size: 12px; color: rgb(205, 236, 222); ">T2</a>  
        <a href="#" rel="1" class="cloud-element" data-tag-id="3" style="font-size: 12px; color: rgb(205, 236, 222); ">T3</a>  
    </div>
</div>

アンカータグに対するユーザーのクリックに応答するクリックハンドラーを設定したいと思います。これがテストコードです：

$("#tag-cloud-widget .content a").click(function(e) {
    alert('clicked');  
    return false;  
});

上記のクリックハンドラーは発生せず、これも発生しません。

$("#tag-cloud-widget .content .cloud-element").click(function(e) {  
    alert('clicked');  
    return false;  
});

しかしながら、

$("#tag-cloud-widget .content").click(function(e) { ... });

そして

$("#tag-cloud-widget").click(function(e) { ... });

解雇される！

私は何を見ていませんか???

jqueryeventsclickhref
13
djeetee

アンカークリックイベントを処理するときは、アンカーが不要な場合は常にe.preventDefault();を使用してください。 チャームのような火

14
rsplak

！これはテストされ、動作しています。

ドキュメント準備関数内にコードを配置するのを忘れた

 $（function（）{
 // your your code 
}）;
1
danidacar

div contentタグに複数のアンカーがあるために最初のコードが機能しない理由は、そのタグにあるアンカーをクリックに関連付けると、正確なアンカーの選択にあいまいさが生じることです。 id属性を使用して特定のアンカーをターゲットにし、idをイベントに関連付けて特定のアンカーをターゲットにすることができます。したがって、コードは次のようになります。

<div id="tag-cloud-widget">  
    <div class="content">  
        <a href="#" rel="1" class="cloud-element" id="anca" data-tag-id="10" style="font-size: 12px; color: rgb(205, 236, 222); ">T1</a>  
        <a href="#" rel="1" class="cloud-element" id="ancb" data-tag-id="1" style="font-size: 12px; color: rgb(205, 236, 222); ">T2</a>  
        <a href="#" rel="1" class="cloud-element" id="ancc" data-tag-id="3" style="font-size: 12px; color: rgb(205, 236, 222); ">T3</a>  
    </div>
</div>

そして以下はクリックを特定のアンカーに関連付けます。

$("#tag-cloud-widget .content #anca").click(function(e) {
    alert('Anchor A clicked');  
    return false;  
});

$("#tag-cloud-widget .content #ancb").click(function(e) {
    alert('Anchor B clicked');  
    return false;  
});

$("#tag-cloud-widget .content #ancc").click(function(e) {
    alert('Anchor C clicked');  
    return false;  
});
0
Kushal

document.ready内にコードを記述し、e.preventDefaultを使用します

以下のように書いてください：

$(document).ready(function(){
    $("#tag-cloud-widget .content a").click(function(e) {
        e.preventDefault();
        alert('Clicked');  
        return false;  
    });
});
0
Bilal Rabi