: not (.class) не работает?

Question

Я следующая структура:

<div class="container"> 
    <div class="post"> 
     <div class="like liked"></div> 
    </div> 
</div> 

Вот мои JS:

$('.container .post .like:not(.liked)').on('click', function() 
{ 
    // this gets fired even if the element has class "liked" 
}); 

Почему JS огнь, даже если элемент имеет класс «любил», когда он должен только огня, если ему имеет класс «нравится»?

Answer 1

Единственная причина для этого было бы класс liked добавляется динамически. То есть после того, как обработчик был зарегистрирован в DOM.

Not working Demo

Таким образом, в то время обработчик события зарегистрирован DIV с like не имеет liked класс. Таким образом, это событие действительно и в конце концов срабатывает при нажатии.

Используйте делегирование мероприятий, чтобы избежать этого.

$('.container .post').on('click','.like:not(.liked)',function(){ 

}) 

Working Demo

Другим вариантом было бы,

$('.container .post .like').on('click', function(){ 
    if(!$(this).hasClass('liked')){ 

    } 
}); 

Answer 2

Использование JQuery не вместо:

$('.container .post .like').not('.liked').on('click', function() { 
    // this gets fired even if the element has class "liked" 
}); 

Answer 3

Использование:

$('.container .post .like').not('.liked').on('click', function() 
{ 
    // this gets fired even if the element has class "liked" 
}); 

Или

$('.container .post .like :not(".liked")').on('click', function() 
//      ^^^ space between not selector 
{ 
    // this gets fired even if the element has class "liked" 
}); 

Answer 4

Это потому, что ваш селектор не в кавычках.

$('.container .post .like:not(".liked")').on('click', function(){ 
// do stuff 
}); 

you can also use the jQuery .not 

$('.container .post .like').not('.liked').on('click', function(){ 
// do stuff 
}); 

EDIT: Добавлен codepen.io пример: http://codepen.io/anon/pen/GJOLew