javascript - HasClass not detecting on elements that used Addclass -
i added class of "vid-active" divs. 1 div can have @ time. try 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 messages player if (window.addeventlistener) { window.addeventlistener('message', onmessagereceived, false); } else { window.attachevent('onmessage', onmessagereceived, false); } // handle messages received player function onmessagereceived(event) { //alert('lept going'); // handle messages vimeo player 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 sending message 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 click on div other first div, (thus activating it). new div gets styles "vid-active" applied jquery not fire appropriate alert.
why , how fix it?
$(selector).click(); tracks element in dom when js loaded. listening dom elements thats added dynamically use:
$(selector).on('click', function (){ //your code here }); hint: if 1 element can have class, maybe can use id. suggest correct logic. multiple element can have class, id 1 element.
related question: event binding on dynamically created elements
Comments
Post a Comment