title: Can't get click event in javascript jQuery
body: <p>Hello, so I have a div with default class <code>Unlocked</code>. When I click on it, I remove the class <code>Unlocked</code> and change it to <code>locked</code> class, and when I click again, go to the old <code>Unlocked</code>.</p>
  
  <p>This my js</p>
  
  <pre><code> $(document).ready(function() {
          console.log("Test");
  
          $(".Unlocked").click(function(){
              console.log("HI2");
              $("#LeftMenu").css('margin-left', '0');
               $("#LockLeftMenu").removeClass("Unlocked");
              $("#LockLeftMenu").addClass("locked");
               $("#lbl_lock").text("UnLock");
  
  
          });
  
    $(".locked").on("click", function (event) {
              console.log("HI");
              $("#lbl_lock").text("Lock");
  
              $("#LeftMenu").css('margin-left', '-260px');
              $("#LockLeftMenu").removeClass("locked");
              $("#LockLeftMenu").addClass("Unlocked");
  
  
          });
  
      });
  </code></pre>
  
  <p>This my html i need before click,</p>
  
  <pre><code>&lt;div id="LeftMenu"&gt;
  &lt;div id="LockLeftMenu" class="Unlocked"&gt;
  &lt;label id="lbl_lock"&gt;Lock&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>after click,</p>
  
  <pre><code>&lt;div id="LeftMenu" style="margin-left: 0px;"&gt;
  &lt;div id="LockLeftMenu" class="locked"&gt;
  &lt;label id="lbl_lock"&gt;UnLock&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but after click on the old $(.Unlocked) elements, what I see in console.log is only HI2.HI2.HI2...   I can't get to HI the $(.locked).</p>