title: Button not binding jQuery class after being inserted
body: <p>I have a button that does the following:</p>
  
  <ol>
  <li>When <strong>pressed</strong>, the button removes a class (1) and adds another
  one (2). This works.</li>
  <li>When <strong>pressed again</strong>, I want to remove the second class (2) and
  add the first one (1). This does <strong>not</strong> work.</li>
  </ol>
  
  <p>Sort of like a toggle.</p>
  
  <p>This is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="follow_btn btn btn-success" value="1"&gt;Follow&lt;/button&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.btn {
      padding:1em;
  }
  .btn-success {
      background:green;
  }
  .btn-danger {
      background:red;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('.follow_btn').on("click", function () {
      var this_btn = $(this);
      this_btn.removeClass("btn-success follow_btn").addClass("btn-danger unfollow_btn");
  });
  
  $('.unfollow_btn').on("click", function () {
      var this_btn = $(this);
      this_btn.removeClass("btn-danger unfollow_btn").addClass("btn-success follow_btn");
  });
  </code></pre>
  
  <p>and a JSFiddle showing my problem:</p>
  
  <p><strong><a href="http://jsfiddle.net/thedarklord1939/pGuue/" rel="nofollow">http://jsfiddle.net/thedarklord1939/pGuue/</a></strong></p>
  
  <p>Why is this doing not working?
  If this is not clear enough, I will elaborate.
  Thank you.</p>