title: Call jquery function when one function completes
body: <p>So I have a jquery click function assigned to an on/off toggle.  Very simple script:</p>
  
  <pre><code>$('.on-off').on('click', function(e) {
      e.preventDefault();
      var $this = $(this);
      $this.find('.slider').toggleClass('active');
  });
  </code></pre>
  
  <p>We have two versions of this toggle.  One toggles instantly when clicked and then we submit the value when clicking next(aka submit).</p>
  
  <p>Our other one calls a jquery ajax function that toggles on success and upon success if it is a specific message code that is defined on the backend.</p>
  
  <pre><code>jQuery.ajax({
                  url: url,
                  type: 'POST',
                  dataType: 'json',
                  cache: false,
                  data: {'requestType': requestType},
                  success: function(message) {
                      if(message.STATUS=='2000'){
                          if(currentButtonClicked=='dashboardChargingButton'){
                              if($('#dashboardChargingButton').html()==startCharge)
                                  $('#dashboardChargingButton').html(stopCharge);
                              else
                                  $('#dashboardChargingButton').html(startCharge);
                           }
                          if(currentButtonClicked=='invokeChargingButton'){
                              $( "#invokeChargingButton .slider" ).toggleClass( 'active');
                          }
                      }
                  },
                  error: function(xhr, ajaxOptions, thrownError) {
                      alert(xhr.status + " - " + xhr.statusText);
                  }
              });
       }
  </code></pre>
  
  <p>As you can see I have to toggle the class again using the same code but with direct targeting.</p>
  
  <p>The on off toggles of this type have an onclick inside the actual html calling the function that handles this ajax.</p>
  
  <p>My goal is to have my first set of code the one that targets the element and toggles the class to do all of this, but dynamically to where we don't have to call a function everytime.</p>
  
  <p>Conceptually what I thought is:</p>
  
  <pre><code>$('.on-off').on('click', function(e) {
      e.preventDefault();
      var $this = $(this);
      if (!$this.attr('onclick')) {
          $this.find('.slider').toggleClass('active');
      } else {
          var clickFunction = $this.attr('onclick');
          call the clickFunction
          if (clickfunction = true) {
              $this.find('.slider').toggleClass('active');
          }
      }
  });
  </code></pre>
  
  <p>What this would do is grab the onclick, but not call it until I specify.  And inside the ajax request instead of toggling I would just return true.</p>
  
  <p>This might not be the best method.  I am just trying to ecapsulate everything to limit the amount of code as well as make all the dom changes for those elements in one spot for any potential defects.</p>
  
  <p>Here is a link to a basic fiddle of the on/off toggle.</p>
  
  <p><a href="http://jsfiddle.net/dstone/J3kms/" rel="nofollow">Fiddle</a></p>
  
  <p>I hope I explained everything in good enough detail.</p>