1

所以这是我的情况：

  • 我在一个类“.editable”中有一堆 DOM 元素，它们附加了 contentEditable 属性。

  • 对于每个元素，我用 实例化一个 Ajax POST keydown()，但在发送 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();
4

3 回答 3

2

这是一个阻止 XHR 请求的示例，如果它仍然处于挂起状态

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

});
于 2012-05-03T20:24:07.870 回答
1

嗯，使用keyup事件怎么样？

正如jQuery 文档中所说：

当用户在键盘上释放一个键时，keyup 事件被发送到一个元素。

更新：为了修复元素焦点，您可以keydown使用以下方式离开事件：

keydown: function(e) {
    e.preventDefault();
    if ((e.keyCode || e.which) == 9) {
        return false;
    }
}
于 2012-05-03T19:43:05.860 回答
1 
    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

在键设置检查回到真。

于 2012-05-03T21:52:38.220 回答