javascript - jquery not selector is not woking on a active class

Question

So i have 2 tabs (Tab1 and Tab2). One has a class of active and other doesn't have a class. When i click on tab2 it should toggle between a 'row' class or a 'list' class based on what is it.

I am able to achieve it with based on my code below.

But when i click on Tab1 I dont want the same effect to take place because it has an active class to it.

I have the following code set up to do that. But that does not seem to work:

    $(document).on('click', '#view:not(.active)', toggleEvent);

    function toggleEvent() {
      $('.view-container').toggleClass('row').toggleClass('list');
    }

Here is the jsfiddle: http://jsfiddle.net/RDewq/1/

Does :not only work with list elements?

Answer 1

You are getting an event firing when a click occurs on the #view div since it does NOT have .active class:

$(document).on('click', '#view a:not(.active)', toggleEvent);
function toggleEvent(){
alert('test');
  $('.view-container').toggleClass('row').toggleClass('list');
}

http://jsfiddle.net/RDewq/2/