Question

所以这是我的情况：

我在“.editable”类中有一堆DOM元素，并附加了contentEditable属性。
对于每个元素，我使用keydown()实例化一个Ajax POST，但是在发送ajax请求之前，我检查keydown（）是否给了我一个TAB或一个ENTER键，如果是的话然后ajax POST成功。

我现在遇到的问题是，如果按住TAB键或ENTER键，我最终会发送多个Ajax POST。我该怎么办呢？

注意：我不想使用.off（）分离事件，因为我希望在ajax POST完成后这些事件仍然存在。

非常感谢任何帮助或建议！

(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: <?=$user_id;?>, sort_id: <?=$currentSort;?>, 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);

然后就这样调用：

$('.editable').SaveEditable();

Answer 1

以下是一个阻止XHR请求的例子，如果它仍处于待决状态

$(function(){
    var xhr;
    $("#my-input").keydown(function(){    
         if (!xhr || xhr.readyState === 4) {
            xhr = $.ajax({...});
         }
    });

});

Answer 2

嗯，使用keyup事件怎么样？

正如jQuery docs所说：

当用户释放密钥时，keyup事件将发送到元素键盘。

更新：为了确定元素焦点，您可以将keydown事件保留为：

keydown: function(e) {
    e.preventDefault();
    if ((e.keyCode || e.which) == 9) {
        return false;
    }
}

Answer 3

    function init(e, options) {
      var check = true;
      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();
                if(check)
                    sendAjax();
                check = false;
        }

    } //END init

在按键设置上，请检查回真。

使用keydown（） - jQuery只发送一个Ajax发布请求

3 个答案: