Событие jquery click on anchor

В этом фрагменте 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) { ... });

Увольте!

Что я не вижу???

Ответы

Ответ 1

При обработке событий щелчка якоря всегда используйте e.preventDefault();, когда вам больше не нужен якорь. Подается как шарм

Ответ 2

! ЭТО протестировано и работает.

Вы забыли поместить свой код в готовый документ

$(function() {
//your code
});

Ответ 3

Причина, по которой ваш первый код не работает, потому что в вашем теге 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;  
});

Ответ 4

Введите код внутри document.ready и используйте e.preventDefault

Напишите как указано ниже:

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