jQuery Forum

This is driving me crazy. I have many divs like the example below. when you click on one its class should change.

1. <div class="yesNoOpac"><span class="yesNoSpan">here is the text</span></div>
2. <script type="text/javascript" charset="utf-8">
      
       $('.yesNoOpac').click(changeClassYesNoOpac);
       function changeClassYesNoOpac(e){
           $(e.target).removeClass("yesNoOpac");
           $(e.target).addClass("yesNoOpacX");
       }
      
    
   </script>
   

The class change changes the background image (aligned left) and the opacity of the div. This works ok for the div , but the problem I am having is that when I click on the text (aligned right) it is changing the class of the span element. I don't want the class of the span to change as that adds the background image to the span too so I end up with one background image for the div and another for the span that's in the div.

What I want is when I click the div anywhere it only changes the class of the whole div and not both the div and the span.

i have also tried this which gave the same result:

1. $('.yesNoOpac:not(.yesNoSpan)').click(changeClassYesNoOpac);
       function changeClassYesNoOpac(e){
           $(e.target).removeClass("yesNoOpac");
           $(e.target).addClass("yesNoOpacX");
       }