title: jQuery $.ajax running twice
body: <p>I have a bit of ajax that runs <code>onClick</code> for check boxes of a certain class, but for some reason my ajax code is getting called twice, and it also seems to change the value of the check box in the call, yet not on the page.</p>
  
  <p>heres my html</p>
  
  <pre><code>&lt;label class="facilities mainfac"&gt;&lt;input name="Foo1" id="Foo1" type="checkbox" value="1"&gt;Foo1&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Bar2" id="Bar2" type="checkbox" value="1"&gt;Bar2&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Foo3" id="Foo3" type="checkbox" value="1"&gt;Foo3&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Bar4" id="Bar4" type="checkbox" value="1"&gt;Bar4&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Foo5" id="Foo5" type="checkbox" value="1"&gt;Foo5&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Bar6" id="Bar6" type="checkbox" value="1"&gt;Bar6&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Foo7" id="Foo7" type="checkbox" value="1"&gt;Foo7&lt;/label&gt;
  &lt;label class="facilities mainfac"&gt;&lt;input name="Bar8" id="Bar8" type="checkbox" value="1"&gt;Bar8&lt;/label&gt;
  </code></pre>
  
  <p>then i use the following to run the ajax;</p>
  
  <pre><code>$(function() {
  
      getCount();
  
      $('.mainfac').on('click', function() {
          getCount();
      });
  
  });
  </code></pre>
  
  <p>and finally here's the functions involved in the ajax request</p>
  
  <pre><code>function urlStringFormChoices()
  {
      var urlVars = '';
  
      urlVas = urlVas + '&amp;Foo1=' + ($('#Foo1').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Bar2=' + ($('#Bar2').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Foo3=' + ($('#Foo3').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Bar4=' + ($('#Bar4').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Foo5=' + ($('#Foo5').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Bar6=' + ($('#Bar6').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Foo7=' + ($('#Foo7').is(':checked') ? '1' : '0');
      urlVas = urlVas + '&amp;Bar8=' + ($('#Bar8').is(':checked') ? '1' : '0');
  
      return urlVas;
  }
  
  function getCount()
  {
      var data = urlStringFormChoices();
      // show loading info to the user
      $('#c-bookable').hide();
      $('#c-loader').show();
      $.ajax({
          url:  '/inc/get-count.php',
          data: data,
          type: 'get'
      }).done( function(count) {
          $('#c-loader').hide();
          if(count != "n/a")
          {
              if($('#bookable').is(':checked')) {
                  $('#c-bookable').html('&lt;span class="c-bookable-count"&gt;' + count + '&lt;/span&gt; available').show();
              } else {
                  $('#c-bookable').html('&lt;span class="c-bookable-count"&gt;' + count + '&lt;/span&gt;')).show();
              }
          }
      });
  }
  </code></pre>
  
  <p>The php page with either return a number or "n/a".
  When clicking on one of the check boxes, for example Bar2, I see in the console two requests made something along these lines</p>
  
  <pre><code>.../get-count.php?Foo1=0&amp;Bar2=1&amp;Foo3=0&amp;Bar4=0&amp;Foo5=0&amp;Bar6=0&amp;Foo7=0&amp;Bar8=0.
  
  .../get-count.php?Foo1=0&amp;Bar2=0&amp;Foo3=0&amp;Bar4=0&amp;Foo5=0&amp;Bar6=0&amp;Foo7=0&amp;Bar8=0.
  </code></pre>
  
  <p>So the first request sent is correct, but the second request reverts the 1 to a 0 cancelling the change, therefore returning an incorrect number.</p>
  
  <p>The check box however acts no different, checking it keeps it checked and vice versa.</p>
  
  <p>There's other code dotted around, but nothing else calls the <code>getCount()</code> function.</p>
  
  <p>What could be causing this rather odd behaviour?</p>