JQuery not selector на динамически добавленном классе

Question

Я хочу добавить событие click на подобную кнопку. При щелчке я хочу добавить класс, называемый активным. Когда элемент имеет этот класс, я не хочу, чтобы событие click срабатывало.

Почему этот журнал «щелкнул!» каждый раз и не только первый?

http://jsfiddle.net/M5MRQ/

<div class="vote"> 
    <a class="vUp">Like me</a> 
</div> 

$(".rate .vUp").not(".active").click(function(){ 
    console.log("click!"); 
    $(this).addClass("active"); 
    return false; 
}); 

Answer 1

Это потому, что ваши изменения DOM во время выполнения, но ваш JS не. Вам нужен живой метод, или лучше, удалить обработчик щелчка на кнопке, как это:

$(".rate .vUp").click(function(event){ 
    console.log("click!"); 
    $(this).addClass("active"); 
    $(event.currentTarget).unbind("click"); 
    event.preventDefault(); 
    return false; 
}); 

посмотреть здесь http://jsfiddle.net/M5MRQ/7/

Answer 2

Вы можете просто отвязать событие на клик с помощью .off()

$(".rate .vUp").click(function(){ 
    console.log("click!"); 
    $(this).addClass("active"); 

    //Unbind event 
    $(this).off("click"); 
    return false; 
}); 

DEMO

Answer 3

Вы можете использовать метод hasClass(), а также получить рабочий пример:

$(".rate .vUp").click(function(){ 
    if (!$(this).hasClass("active")) {   
     console.log("click!"); 
     $(this).addClass("active"); 
     event.preventDefault(); 
     return false; 
    } 
}); 

см http://jsfiddle.net/M5MRQ/9/

Answer 4

Попробуйте использовать следующий код:

$(".rate .vUp").click(function(){ 
    if($(this).hasClass("active")){ 
     return false; 
    }else{ 
     console.log("click!"); 
     $(this).addClass("active"); 
    }    
});