jquery click событие на якоре - PullRequest
Новая
       25

jquery click событие на якоре

13 голосов
/ 26 марта 2011

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

действительно уволят!

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

Ответы [ 4 ]

14 голосов
/ 26 марта 2011

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

1 голос
/ 26 марта 2011

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

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

$(function() {
//your code
});
0 голосов
/ 01 марта 2012

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

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

$(document).ready(function(){
    $("#tag-cloud-widget .content a").click(function(e) {
        e.preventDefault();
        alert('Clicked');  
        return false;  
    });
});
0 голосов
/ 26 марта 2011

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