jQuery Datepicker在输入字段被重新单击时挂起(Chrome) [英] jQuery Datepicker hangs when input field is re-clicked (Chrome)
问题描述
我有这个jsFiddle: http://jsfiddle.net/VebTY/
I have this jsFiddle: http://jsfiddle.net/VebTY/
看来这只是Chrome中的问题.
It looks this this is only an issue in chrome.
当您单击页面中的项目时,它会添加一个文本字段,然后弹出一个日期选择器.当您从文本框中单击然后返回到文本框中时,浏览器将挂起5-10秒.为什么这样做,我该如何解决?
When you click on a an item in the page, it adds a text field, and then a date picker pops up. When you click out of the text box then back into the text box the browser hangs for 5 - 10 seconds. Why is it doing that and how can I fix it?
这是我的相关代码:
$(document).on("focus", "td input[type=text]", function(e) {
e.stopPropagation();
if ($(this).closest("td").attr("data-type") === "date") {
var dt = $(this).val();
$(this).not(".hasDatePicker").datepicker();
$(this).datepicker("setDate", dt);
}
});
$(".editable").click(function(e) {
if (!$(e.target).is('input, textarea')) {
$(".editable").each(function() {
if ($(this).has("input")) {
var v = $(this).children("input.input, textarea").attr("data-orig");
$(this).text(v);
}
});
var type = $(this).attr("data-type");
var val = $(this).text();
if (type === "text" || type === "date") {
str = '<input type="text" data-orig="' + val + '" onfocus="this.value = this.value;" class="input" style="width: 100%;" value="' + val + '" /><br />';
} else if (type === "textarea") {
str = '<textarea class="input" data-orig="' + val + '" onfocus="this.value = this.value;" style="width: 100%;">' + val + '</textarea><br />';
}
str += '<input type="button" class="save-edit" value="Save" />';
str += '<input type="button" class="cancel-edit" value="Cancel" />';
$(this).html(str);
$(this).find("input[type=text], textarea").focus();
}
});
推荐答案
您正在此处创建无限循环.
You are creating an infinite loop here.
问题的原因在第7行:
$(this).datepicker("setDate", dt);
它会创建一个无限循环,在该循环中您的焦点事件将被触发直到一切崩溃
It creates an infinite loop where your focus event is triggered until everything crashes
我将尝试找出解决方法,稍后将用小提琴进行更新
I'll try to figure out how to solve this, will update with a fiddle shortly
更新:
发现您的问题!这是一个工作的小提琴
Found your problem ! here is a working fiddle
问题是由以下行引起的:
The problem was caused by this line:
$(this).not(".hasDatePicker").datepicker();
类名是hasDatepicker
而不是hasDatePicker
. :D
the class name is hasDatepicker
not hasDatePicker
. That was a tricky one :D
这篇关于jQuery Datepicker在输入字段被重新单击时挂起(Chrome)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!