title: Jquery click event on a div tile not work
body: <p>Jquery click event on a div tile not working. I do not want to manipulate CSS directly in jquery script</p>
  
  <p>I created a tile with a simple div. I have four divs. Each div has a class "tiles. These 4 divs are in a outer bigger div but I guess that does not matter here. I added some query code to make sure that when i click on a tile, a new class "activeTiles" get added. In my css file, the tiles class has a background color "blue" and the activeTile class has background color "cyan". So the jquery code I wrote, adds the class "activeTile" so that the color changes for the tile. I am using "mousedown" event. However, the problem I face is that even though the new class gets added on clicking, the color of the tile does not change until I move the mouse out of the div area of the tile. So essentially, when i press mouse button and leave mouse button, in the console my log gets printed that event handler clicked. But the color of the tile is not changing until i move the mouse curosr out of the div. Can anyone tell why? here is my tile and activetile and jquery code.</p>
  
  <pre><code>.tiles {
  color: white;
  width: 120px;
  height: 120px;
  /*margin: 0 auto;*/
  background-color: #3399CC;
  padding: 10px;
  position: relative;
  border: 2px solid #2F4F4F;
  transition: all 0.5s ease;
  /*text-align: center;*/
  vertical-align: middle;
  line-height: 13;
  font-weight: bold;
  }
  
  
  
  .activeTile {
  background-color: cyan;
  }
  </code></pre>
  
  <p>Here is the jquery function:</p>
  
  <pre><code>$(function() {
  $(".tiles").on('mousedown',function() {
  console.log("tile clicked")
  $(".activeTile").removeClass("activeTile");
  $(this).toggleClass("activeTile");
  });
  });
  </code></pre>