所以这是我的情况:
我在一个类“.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();