Question

i’m trying to exclude a class from a jquery function, but I can’t seem to get it to work properly. i tried .not() but it didn’t seem to be working correctly.

here’s the basic structure I have…

<div id='spotList' class='clickableSpot id_117 '>
    <div id='leftCheckboxBar'>
        <form id='checkboxForm' name='checkboxForm'>
            <input type='checkbox' class='spotCheck' unchecked id='117'/>
        </form>
    </div><!--end leftcheckboxbar-->

    <div id='leftCredits'>
        <ul class='credits'>
            <li id='agencyItem'>Agency: <span class='creditText searchAgency'>Y&R</span></li>
        </ul>
    </div><!--end leftcredits-->
</div><!--END SPOT LIST-->

Now I have a jQuery function where you can either click on the .spotList checkbox directly or on the .spotList div. It looks like this, and it works properly…

$('.spotCheck, .clickableSpot').click(function(){ 
   /*do stuff*/
});

I don’t want the span .creditText to be included in that selector. I can’t seem to figure it out. There has to be a way for me to exclude clicking on that span and triggering the function. But I need everything else in the div to be clickable, just not that piece of text within the span.

Any ideas?

Answer 1

You can use target property of the event object:

$('.spotCheck, .clickableSpot').click(function(event){ 
   if (!$(event.target).hasClass('creditText')) {
     // do something here
   }
});

You can also you stopPropagation method:

$('.creditText').click(function(event){
    event.stopPropagation()
})

http://jsfiddle.net/4rBaM/