HasClass not detecting on elements that used Addclass

Question

I added a class of "vid-active" to divs. Only one div can have it at a time. I now try to do this:

$('.kol-vid-select').click(function(){
    var clicked = $(this);
    $('.kol-vid-select').removeClass('vid-active');
    clicked.addClass('vid-active');

    if($('.vid-active').hasClass('overview')){
        $('#myvid').attr('src', 'http://player.vimeo.com/video/108161058?api=1&player_id=player1');
        counter=0;
        //alert('overview');
    }

    if($('.vid-active').hasClass('analysis')){
        $('#myvid').attr('src', 'https://player.vimeo.com/video/125471793?api=1&player_id=player1');
        counter=0;
        //alert('analysis');
    }

    if($('.vid-active').hasClass('compelling')){
        $('#myvid').attr('src', 'https://player.vimeo.com/video/125478290?api=1&player_id=player1');
        counter=0;
        //alert('compelling');
    }

    if($('.vid-active').hasClass('practical')){
        $('#myvid').attr('src', 'https://player.vimeo.com/video/125483119?api=1&player_id=player1');
        counter=0;
        //alert('practical');
    }

    if($('.vid-active').hasClass('proven')){
        $('#myvid').attr('src', 'https://player.vimeo.com/video/125483160?api=1&player_id=player1');
        counter=0;
        //alert('proven');
    }
});
//------------------------------------------------------
var counter = 0;
$(function() {
    //alert('in here');
var player = $('iframe');
var playerOrigin = '*';
var status = $('.status');

// Listen for messages from the player
if (window.addEventListener) {
    window.addEventListener('message', onMessageReceived, false);
}
else {
    window.attachEvent('onmessage', onMessageReceived, false);
}

// Handle messages received from the player
function onMessageReceived(event) {
    //alert('lept going');
    // Handle messages from the vimeo player only
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
        return false;
    }

    if (playerOrigin === '*') {
        playerOrigin = event.origin;
    }

    var data = JSON.parse(event.data);

    switch (data.event) {
        case 'ready':
            onReady();
            break;

        case 'playProgress':
            onPlayProgress(data.data);
            break;
    }
}

// Helper function for sending a message to the player
function post(action, value) {
    var data = {
      method: action
    };

    if (value) {
        data.value = value;
    }

    var message = JSON.stringify(data);
    player[0].contentWindow.postMessage(data, playerOrigin);
}

function onReady() {
    post('addEventListener', 'playProgress');
}


function onPlayProgress(data) {
    //alert('Hello!');
    if (true) {};
    if (true) {};
    if (true) {};
    if (true) {};
    if (true) {};
    alert(counter);

    if ($(".vid-active").hasClass("overview")&&(counter==0)) {
        alert("This");
        counter = counter + 1;
        ga('send','event', 'KOL Video', 'Start', 'Chapter 1 - Overview');
    };
    if ($(".vid-active").hasClass("analysis")) {
        alert("is");
        counter = counter + 1;
        ga('send','event', 'KOL Video', 'Start', 'Chapter 2 - Compounding');
    };
    if ($(".vid-active").hasClass("compelling")) {
        alert("SPARTA");
        counter = counter + 1;
        ga('send','event', 'KOL Video', 'Start', 'Chapter 3 - FDA-Approved');
    };
    if ($(".vid-active").hasClass("practical")) {
        alert("AAAAA!");
        counter = counter + 1;
        ga('send','event', 'KOL Video', 'Start', 'Chapter 4 - Co-pay');
    };
    if ($(".vid-active").hasClass("proven")) {
        alert("!!!!!!!");
        counter = counter + 1;
        ga('send','event', 'KOL Video', 'Start', 'Chapter 5 - Epaned');
    };
}

});

But when I click on any div other than the first div, (thus activating it). the new div gets the styles from "vid-active" applied but JQuery does not fire the appropriate alert.

Why is this and how do I fix it?

Your code does't compile, it has a syntax error `if ($(".vid-active").hasClass("overview")&&(counter==0) {` unmatched parens — Ruan Mendes, Apr 24 '15 at 20:59
It is nested inside a "playProgress" event using the vimeo API. — Rambo8000, Apr 24 '15 at 21:00
@Rambo8000 Show the HTML and the code event handler that is calling it — Ruan Mendes, Apr 24 '15 at 21:00
is the code triggered on document ready? it may fail for this reason. It happened to me too and lost a fiew hours because of this. — Catalin Sterian, Apr 24 '15 at 23:15

score 1 · Accepted Answer · edited May 23 '17 at 12:14

$(selector).click();

Tracks the element that are in DOM when the js is loaded. For listening the DOM with elements thats are added dynamically use:

$(selector).on('click', function (){
   //your code here
});

HINT: if only one element can have a class, maybe you can use an ID. Is only a suggest for correct logic. Multiple element can have a class, but an id is only for one element.

Related Question: Event binding on dynamically created elements

HasClass not detecting on elements that used Addclass

1 Answers1