title: Prevent a common event from firing twice
body: <p>I am having an issue with preventing repeated clicks of the same element that can produce unwanted results. I cannot use jquery's one() because this event is attached to many elements, including children of the clicked element. </p>
  
  <p>Essentially I have a div. The user may click on the div and it will make an AJAX request to load another div. The user may accidentally click the div again (as I have done often) and this will result in two AJAX requests and load two child divs. There is logic to prevent further children if the child is already found, but during the loading of the AJAX request it is possible to request it again. The same element should not be able to be clicked twice and request to AJAX requests. However multiple elements could be potentially clicked at the same time. </p>
  
  <p>Each child div can also load more children using the exact same on('click') handler. What can I do to prevent repeated clicks sending multiple AJAX requests without using jquery's one() ?</p>
  
  <p>THe below is just an example but this is the logic:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id = "parent" class = "button"&gt; Click Me &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$('.button').on('click', function(){
    var data = getsomedata();
    $.post(url, data, function(data){
      $('.resultDiv').after(data);
    });
  });
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>function someData ($db, $request){
    do some database request
    echo '&lt;div class = "child button"&gt; I am a child table that is also clickable &lt;/div&gt;';
  }
  </code></pre>