wake-up-neo.net

jquery-Click-Ereignis vor Anker

Hier ist der Ausschnitt von HTML, den ich habe: 

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

Ich möchte einen Click-Handler einrichten, um auf das Klicken des Benutzers auf die Ankertags zu reagieren. Hier ist der Testcode: 

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

Der Click-Handler oben wird nicht ausgelöst und dies auch nicht: 

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

Jedoch, 

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

und 

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

werde gefeuert! 

Was sehe ich nicht ???

13
djeetee

Verwenden Sie bei der Verarbeitung von Ankerklickereignissen immer e.preventDefault();, wenn Sie den Anker trotzdem nicht benötigen. Feuer wie ein Zauber

14
rsplak

! Das ist getestet und funktioniert.

Sie haben vergessen, Ihren Code in die Funktion Dokument bereit zu stellen

 $ (function () {
 // Ihr Code 
}); 
1
danidacar

Der Grund, warum Ihr erster Code nicht funktioniert, weil Ihr div content-Tag mehrere Anker enthält. Wenn Sie also Anker, der sich in diesem Tag befindet, mit einem Klick verknüpfen, wird die Auswahl des genauen Ankers mehrdeutig. Sie können einen bestimmten Anker als Ziel auswählen, indem Sie dessen id-Attribut verwenden, und dann die id Ihren Ereignissen zuordnen, um einen bestimmten Anker als Ziel festzulegen. Der Code lautet also wie folgt.

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

Nachfolgend werden Klicks einem bestimmten Anker zugeordnet.

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

Schreiben Sie Ihren Code in document.ready und verwenden Sie e.preventDefault

Schreiben Sie wie unten angegeben:

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