web-dev-qa-db-fra.com

événement jquery click sur ancre

Voici l'extrait de code HTML que j'ai: 

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

Je voudrais configurer un gestionnaire de clic pour répondre au clic de l'utilisateur sur les balises d'ancrage. Voici le code de test: 

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

Le gestionnaire de clics ci-dessus ne se déclenche pas et ceci non plus: 

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

Cependant, 

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

et 

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

se faire virer! 

Qu'est-ce que je ne vois pas ???

jqueryeventsclickhref
13
djeetee

Lors du traitement des événements de clic d’ancrage, utilisez toujours e.preventDefault(); lorsque vous n’avez de toute façon pas besoin de l’ancre. Les feux comme un charme

14
rsplak

! CECI est testé et fonctionne.

Vous avez oublié de mettre votre code dans la fonction de préparation de document

 $ (function () {
 // votre code 
});
1
danidacar

La raison pour laquelle votre premier code ne fonctionne pas parce qu'il y a plusieurs ancres dans votre balise div content; par conséquent, lorsque vous associez un ancre résidant dans cette balise à un clic, le choix de l'ancre exacte deviendra ambigu. Vous pouvez cibler une ancre particulière en utilisant son attribut id, puis associer la id à vos événements pour cibler une ancre particulière. Donc, le code sera comme suit.

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

Et associeront ensuite les clics à une ancre particulière.

$("#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

Ecrivez votre code dans document.ready et utilisez e.preventDefault

Écrivez comme ci-dessous:

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