title: jQuery click action only fires once, per page refresh
body: <p>I have written a jQuery code in the admin section of my site that turns the site offline without page refresh. It works great, but for one thing:</p>
  
  <blockquote>
    <p>When I click on TURN ON the ajax call is made accurately and all the classes are changed and the text is changed the TURN OFF. However, when I click on this text, nothing happens. If I reload the page, then I will be able to.</p>
  </blockquote>
  
  <pre><code>$("#switch_off").click(function() {
                  $("#switch_off").html("&lt;img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\"&gt;");
                  $('#switch_off').removeClass('ttip_b')
                  $.ajax({
                      url: "/settings/SwitchOffline",
                      type: "get",
                      data: '',
                      success: function(responseText, statusText, xhr, $form){ // Trigger when request was successful
                          $("#site_status").html("&lt;span id=\"offline\" class=\"lbl error_bg\"&gt;Offline&lt;/span&gt;&lt;span id=\"switch_on\" class=\"ttip_b\" title=\"Click to place Site Online\"&gt;Turn On&lt;/span&gt;");
                      },
                      error: function(responseText){
                          //alert(responseText);
                      }   
                  });
                  return false;
              });
  
              $("#switch_on").click(function() {
                  $("#switch_on").html("&lt;img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\"&gt;");
                  $('#switch_on').removeClass('ttip_b')
                  $.ajax({
                      url: "/settings/SwitchOnline",
                      type: "get",
                      data: '',
                      success: function(responseText, statusText, xhr, $form){                            
                          $("#site_status").html("&lt;span id=\"online\" class=\"lbl ok_bg\"&gt;Online&lt;/span&gt;&lt;span id=\"switch_off\" class=\"ttip_b\" title=\"Click to place Site Offline\"&gt;Turn Off&lt;/span&gt;");                          
                      },
                      error: function(responseText){
                          //alert(responseText);
                      }   
                  });
  
                  return false;
              });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zVDkM.jpg" alt="ONLINE">
  <img src="https://i.stack.imgur.com/nJkYT.jpg" alt="OFFLINE"></p>
  
  <p>HTML CODE WITH SOME PHP</p>
  
  <pre><code>&lt;div class="user_info user_sep" style="width:90px;"&gt;
                              &lt;p class="sepH_a"&gt;
                                  &lt;strong&gt;Site Status&lt;/strong&gt;
                              &lt;/p&gt;
                              &lt;?php
                              //debug($site_offline);
                              if($site_offline){
                              ?&gt;                              
                              &lt;span id="site_status"&gt;
                                  &lt;span id="offline" class="lbl error_bg"&gt;Offline&lt;/span&gt;
                                  &lt;span id="switch_on" class="ttip_b" title="Click to place Site Online"&gt;Turn On&lt;/span&gt;
  
                              &lt;/span&gt;
                              &lt;?php }else{ ?&gt;
                              &lt;span id="site_status"&gt;
                                  &lt;span id="online" class="lbl ok_bg"&gt;Online&lt;/span&gt;
                                  &lt;span id="switch_off" class="ttip_b" title="Click to place Site Offline"&gt;Turn Off&lt;/span&gt;
  
                              &lt;/span&gt;
                              &lt;?php } ?&gt;
                          &lt;/div&gt;
  </code></pre>