0
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = $("div.rsCloseVideoBtn");
var vid_launch = $("h1#vidLaunch");

vid_launch.click(function () {
    vaStyle.addClass("hprs-video-active");
}); 
vid_detach.click(function(){
    vaStyle.removeClass("hprs-video-active");
});

Why isn't my removeClass working? Is there a better method?
Also, when you declare a var does it work document-wide?

rrk
  • 15,677
  • 4
  • 29
  • 45
pjldesign
  • 387
  • 1
  • 3
  • 17
  • 1
    Are you sure that your `click` event is firing? Have you tried to place a breakpoint there? – Yeldar Kurmangaliyev Oct 28 '15 at 08:16
  • Are the `vaStyle` elements getting dynamically added? – rrk Oct 28 '15 at 08:17
  • its not — the class isn't being removed... no breakpoints. thanks. – pjldesign Oct 28 '15 at 08:18
  • What about the second question: read http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript and http://www.w3schools.com/js/js_scope.asp – Yeldar Kurmangaliyev Oct 28 '15 at 08:18
  • Place the breakpoint and check if this function is being called. If it isn't then the problem is not in `addClass` \ `removeClass`, but in your click handler. – Yeldar Kurmangaliyev Oct 28 '15 at 08:19
  • 1
    When do you run this snippet? for debug purposes try add `console.log(vaStyle.size());` in order to check if the element is correctly selected. – morels Oct 28 '15 at 08:21
  • 1
    Please, reproduce this problem at [JSFiddle](http://jsfiddle.net). – Yeldar Kurmangaliyev Oct 28 '15 at 08:21
  • missed the closing colon on the second var call (smacks head)... thanks guys. – pjldesign Oct 28 '15 at 08:25
  • wait. thats not the problem... the rsCloseVideoBtn button is generated _after_ the vid_launch. In other words, clicking the vid_launch activates the button, it is not present at DOM ready. is there a way to bind the function to the button, before it is in the DOM? Does that make sense? – pjldesign Oct 28 '15 at 08:30

1 Answers1

0

Sounds like your elements are getting added dynamically. Use event delegation for solving this. I made changes to the event binding.

var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = "div.rsCloseVideoBtn";
var vid_launch = "h1#vidLaunch";

$(document).on('click', vid_launch, function () {
    vaStyle.addClass("hprs-video-active");
}); 
$(document).on('click', vid_detach, function () {
    vaStyle.removeClass("hprs-video-active");
});
rrk
  • 15,677
  • 4
  • 29
  • 45