title: Send only one Ajax post request with keydown() - jQuery
body: <p>So here is my situation:</p>
  
  <ul>
  <li><p>I have a bunch of DOM elements in a class ".editable" with the contentEditable attribute attached to them.</p></li>
  <li><p>For each element I instantiate an Ajax POST with <code>keydown()</code>, but before the ajax request is sent, I check to see if the keydown() gives me a TAB or an ENTER key, and if so then the ajax POST succeeds. </p></li>
  </ul>
  
  <p>The issue I am having right now is that if the TAB key or the ENTER key is held down, I am ending up sending multiple Ajax POSTs.  How would I go about stopping this?  </p>
  
  <p>NOTE:  I don't want to detach the event with .off() because I want those events to still exist after the ajax POST is done.</p>
  
  <p>Any help or recommendations would be much appreciated!</p>
  
  <pre><code>(function($, window, document) {
  
    /* Namespace */
    $.fn.SaveEditable = function() {  
          var settings = {
              context: null,
              position: null,
              content: "(empty)",
              element: "(empty)",
              data_id: "(empty)"
          };
  
          var s, keyCode;
  
          function init(e, options) {         
            s = $.extend({}, settings, options);
            keyCode = e.keyCode || e.which;           
  
              //If Enter or Tab key is pressed
              if(keyCode == 9 || keyCode == 13) { 
                  e.preventDefault();
                  s.context.blur();
                  sendAjax();
              }
          } //End init
  
          function sendAjax() {
             $.ajax({
                url: 'save.php',
                type: 'POST',
                data: { user_id: &lt;?=$user_id;?&gt;, sort_id: &lt;?=$currentSort;?&gt;, element: s.element, data_id: s.data_id, content: s.content },
  
                success: function (data) {
                  if(data) {
                      var obj = jQuery.parseJSON(data);
                      //Do something with obj
                  }
                  $(".ajax-status")
                  .addClass("success")
                  .html("Updated content successfully");
                },
  
                error: function() {
                  $(".ajax-status")
                  .addClass("error")
                  .html("An error has occurred. Please try again.");
                }
            });        
           } //End sendAjax
  
  
          /* Initilize */
          return this.each(function(i, domEl) {               
              $(this).on({
                  keydown: function(e) {
                      init(e, {
                          context: $(this),
                          position: i,
                          content: $(this).text(),
                          element: $(this).data('element'),
                          data_id: $(this).data('id')
                      });
                   }
              });
          });
    };
  })(jQuery, window, document);
  </code></pre>
  
  <p>Then it is called like so:</p>
  
  <pre><code>$('.editable').SaveEditable();
  </code></pre>