Jquery hasClass() function not Working properly

Question

I have this simple jquery script which for some reason dont work properly. When i click the trigger it doest change the css class and doesnt give any error?

$(document).on('click', '.cours-box .panel-footer', function () {
       var _CoursBox = $(this).closest('.cours-box');                     
       if(_CoursBox.hasClass("active")) {
            _CoursBox.removeClass('panel-primary active').addClass('panel-default');
       } else {
            _CoursBox.removeClass('panel-default').addClass('panel-primary active');
       }
   });

Here is the HTML:

<div class="panel cours-box panel-primary active">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <h4>Titel<small>1302</small></h4>

            </div>
            <div class="col-md-6">


            </div>
        </div>
    </div>
    <label class="panel-footer" for="r1302">
        <div class="row">
            <div class="col-md-6">
                <input class="hidden" id="r1302" type="checkbox" name="course_[]" value="1302"> Jan| Day:1</div>
            <div class="col-md-6"> </div>
        </div>
    </label>
</div>

Is `activen` a typo? Note the `n`. Also note that you can condense this to just a call to `toggleClass`. — Rory McCrossan, Jan 05 '16 at 13:37
You should share a MCVE replicating issue (at least provide relevant HTML markup). — A. Wolff, Jan 05 '16 at 13:40
The code you've shown here works fine: https://jsfiddle.net/grfb7foz/. Can you please show a demonstration of the problem. — Rory McCrossan, Jan 05 '16 at 13:44

score 0 · Answer 1 · edited Jan 05 '16 at 13:54

0

I just rewrote the script to a more convinient way! ~~I would still like to know why it didnt work thouh?~~

 $(document).on('click', '.cours-box input[type="checkbox"]', function () {
        var _CoursBox = $(this).closest('.cours-box');  
        if (!$(this).is(':checked')) {
            _CoursBox.removeClass('panel-primary active').addClass('panel-default');
       } else {
            _CoursBox.removeClass('panel-default').addClass('panel-primary active');
       }
   });

edited Jan 05 '16 at 13:54

A. Wolff

74,033
9
94
155

answered Jan 05 '16 at 13:41

jhon dano

660
6
23

1

I can be missing something but how do you know any checkbox is involved? EDIT: oops, you are the OP... But wait, that isn't an answer at all! – A. Wolff Jan 05 '16 at 13:42
Yes it is an answer checkout the html part of the code! – jhon dano Jan 05 '16 at 13:48
stop hating...! Thanks for your help anyway! – jhon dano Jan 05 '16 at 13:51
1

Your issue is only when clicking on label to check/uncheck the checkbox. This is due to synthetic click being fired on checkbox after the one done on label. That results in two click events getting fired and so you are adding/removing classes. Easier solution would be to check for `checked` state as you do :) PS: no hate! What do you mean? My previous comment wasn't ironic at all See: http://stackoverflow.com/questions/33434154/click-event-triggering-two-times – A. Wolff Jan 05 '16 at 13:52
Thanks i appreciate it! – jhon dano Jan 05 '16 at 13:54
I just edited your post so i can remove downvote, making it an upvote... :) – A. Wolff Jan 05 '16 at 13:54

Jquery hasClass() function not Working properly

1 Answers1