title: Not able to fix background color of div element in JQuery
body: <p>I want my div element color to be fixed once a user clicks on it. But now, it keeps changing the color even after users click on it. </p>
  
  <p>This is my code snippet which I have tried.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("div").on({
          mouseenter: function(){
              $(this).css("background-color", "lightgray");
          },  
          mouseleave: function(){
              $(this).css("background-color", "lightblue");
          }, 
          click: function(){
              $(this).css("background-color", "Red");
          }  
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;Some Comment Text&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>