title: CSS not getting updated through jQuery
body: <p>I am stuck in a silly problem. I have two divs (white coloured). Onclick them a class should be added which changes the color from white to blue. The class is getting added but the colour is not changing. (I do not need to addClass() just to change colour, but there will be more things in that class later, right now I have to execute it properly).</p>
  
  <p>The divs has a class "thumbnail", onClick I want to add "border-glow". </p>
  
  <pre><code>// ImageBox component
  
  // Author Sayantan Hore
  // Created on 19.08.2014
  
  // --------------------------------
  
  function ImageBox(){
      this.outerContainer = null;
      this.imageBoxArray = [];
  }
  ImageBox.prototype.createOuterContainer = function(){
      this.outerContainer = $("&lt;div&gt;&lt;/div&gt;")
      this.outerContainer.addClass("outer-image-container");
      $("body").append(this.outerContainer);
  
  }
  ImageBox.prototype.createImageBox = function(){
      if (this.createOuterContainer === null){
          this.createOuterContainer();
      }
      var imageBox = $("&lt;div&gt;&lt;/div&gt;");
      imageBox.addClass("thumbnail");
  
      var closeButton = $("&lt;div&gt;x&lt;/div&gt;");
      closeButton.addClass("btn-close");
  
      //imageBox.append(closeButton);
      this.imageBoxArray.push(imageBox);
      return imageBox;
  }
  
  ImageBox.prototype.loadImage = function(imPath, imageBox){
      var img = $("&lt;img&gt;&lt;/img&gt;")
      img.attr("src", imPath);
      imageBox.append(img);
  
      img.load(function(){
          //console.log($(this).height());
          imgWidth = $(this).width();
          $(this).parent().height(rowHeight);
          $(this).height(rowHeight);
          //console.log($(this).width());
          $(this).parent().width($(this).width());
      });
  }
  
  var rowHeight;
  $(document).ready(function(){
      rowHeight = parseFloat(($(window).height() * 90 / 100) / 5);
      //console.log(rowHeight);
      var imageBoxObj = new ImageBox();
      imageBoxObj.createOuterContainer();
      for (var i = 0; i &lt; 2; i++){
          var imageBox = imageBoxObj.createImageBox();
          imageBoxObj.outerContainer.append(imageBox);
          var imPath = '../images/im' + (i + 1) + '.jpg';
          //imageBoxObj.loadImage(imPath, imageBox);
  
      }
      console.log(screen.availHeight);
      console.log($(window).height());
      console.log($(".outer-image-container").height());
      $(".thumbnail").on("click", function(){
          $(this).addClass("border-glow");
          alert($(this).hasClass("border-glow"));
      })
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sayantan_hore/1hkzrp8p/10/" rel="nofollow"><strong>here is Fiddle:</strong></a></p>
  
  <p>see line numbers 57-60 in javascript part.</p>
  
  <p>Can anybody help please?</p>