title: Jquery event quits firing after 3 hits
body: <p>I'm working with a small mvc view and I want to be able to toggle the data source(ajax call to controller) between either 1 of 2 locations or both.  It all works great, until I've clicked the toggles 3 different times, then all three toggles become unresponsive.  I've tried click and change events, same results.</p>
  
  <p>The only other items are on the page is a left navigation view that still works after the toggles go idle.  </p>
  
  <p>If I navigate away from the view with the toggles and then back to it they remain broken.  If I hard refresh the page they work for another 3 clicks.</p>
  
  <p>I'm at a loss on this and need some help.  Any thoughts?</p>
  
  <p>my toggles</p>
  
  <pre><code>&lt;div class="btn-group"id="divToggle" data-toggle="buttons"&gt;
              &lt;label class="btn blue"&gt;
                  &lt;input type="radio" value="1"  class="toggle DashToggle"&gt; US06
              &lt;/label&gt;
              &lt;label class="btn blue active"&gt;
                  &lt;input type="radio" value="0"  class="toggle DashToggle"&gt; BOTH
              &lt;/label&gt;
              &lt;label class="btn blue"&gt;
                  &lt;input type="radio" value="2" class="toggle DashToggle"&gt; US05
              &lt;/label&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>And my view consist of 5 div blocks like the following</p>
  
  <pre><code>&lt;div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;div class="dashboard-stat blue-soft"&gt;
                      &lt;div class="visual"&gt;
                          &lt;i class="fa fa-car"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="details"&gt;
                          &lt;div class="number stat_ActiveJits"&gt;
                              1349
                          &lt;/div&gt;
                          &lt;div class="desc"&gt;
                              Active JITS
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;a class="more" href="javascript:;"&gt;
                          View Details &lt;i class="m-icon-swapright m-icon-white"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have tried all of the following examples for the Jquery side and they all quit working after 3 clicks...</p>
  
  <pre><code>$(document).ready(function () {
  
  
      $('#divToggle input[type=radio]').change(function () {
          BuildDashBoard(this.value)
      });    
  });
  
  $('#divToggle input[type=radio]').live().change(function () {
      BuildDashBoard(this.value)
  });
  
  $('.divToggle').on('change', '.DashToggle', (function () {
      BuildDashBoard(this.value)
  }));
  </code></pre>
  
  <p>And yes the toggle classes were changed to match these.</p>
  
  <pre><code>$(".US06_DashToggle").change(function () {
      BuildDashBoard(1)
  })
  $(".US05_DashToggle").change(function () {
      BuildDashBoard(2)
  })
  $(".DYNA_DashToggle").change(function () {
      BuildDashBoard(0)
  })
  </code></pre>
  
  <p>And finally my ajax call which works fine.</p>
  
  <pre><code>function BuildDashBoard(plantid)
  {
      var uri = 'http://' + host + '/DashBoard/DashStats';
  
  
      $.ajax({
          type: 'POST',
          url: uri,
          data: { PlantId: plantid },
          success: function (d) {
  
              $('.stat_ActiveJits').text(d.ActiveJits.toString());
              $('.stat_PastDueJits').text(d.PastDueJits.toString());
              $('.stat_ActiveExpedites').text(d.ActiveExpedites.toString());
              $('.stat_PastDueExpedites').text(d.PastDueExpedites.toString());
              $('.stat_ActiveProductionOrders').text(d.ActiveProductionOrders.toString());
              //$.notific8('Application Options Updated', { theme: 'teal', life: 2000, verticalEdge: 'right', horizontalEdge: 'bottom' });
          }
  
      });
  }
  </code></pre>