1

だからここに私の状況があります：

  • contentEditable 属性が付加されたクラス「.editable」に多数の DOM 要素があります。

  • 要素ごとに を使用して Ajax POST をインスタンス化しますkeydown()が、ajax リクエストが送信される前に、keydown() が TAB または ENTER キーを与えるかどうかを確認し、そうであれば ajax POST は成功します。

私が現在抱えている問題は、TAB キーまたは ENTER キーを押したままにすると、複数の Ajax POST を送信してしまうことです。どうすればこれを止めることができますか？

注: ajax POST が完了した後もこれらのイベントを引き続き存在させたいため、.off() でイベントをデタッチしたくありません。

ヘルプや推奨事項をいただければ幸いです。

(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 
    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

キーアップ時に、チェックを true に戻します。

于 2012-05-03T21:52:38.220 に答える
1

うーん、keyupイベントを使うのはどうですか？

jQuery docsで述べたように：

keyup イベントは、ユーザーがキーボードのキーを離したときに要素に送信されます。

更新:要素のフォーカスを修正するために、次のようにkeydownイベントを残すことができます:

keydown: function(e) {
    e.preventDefault();
    if ((e.keyCode || e.which) == 9) {
        return false;
    }
}
于 2012-05-03T19:43:05.860 に答える