【问题标题】:jQuery Datepicker hangs when input field is re-clicked (Chrome)重新单击输入字段时jQuery Datepicker挂起(Chrome)
【发布时间】:2013-06-27 20:37:16
【问题描述】:

我有这个 jsFiddle:http://jsfiddle.net/VebTY/

看起来这只是 chrome 中的一个问题。

当您单击页面中的某个项目时,它会添加一个文本字段,然后会弹出一个日期选择器。当您单击文本框外然后返回文本框时,浏览器会挂起 5 到 10 秒。为什么会这样,我该如何解决?

这是我的相关代码:

$(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();
    }
});

【问题讨论】:

    标签: javascript jquery jquery-ui jquery-ui-datepicker


    【解决方案1】:

    你在这里创建了一个无限循环。

    问题的原因在第7行:

    $(this).datepicker("setDate", dt);
    

    它会创建一个无限循环,在该循环中触发焦点事件,直到一切崩溃

    我会想办法解决这个问题,很快就会用小提琴更新

    更新:

    发现你的问题!这是working fiddle

    问题是由这一行引起的:

    $(this).not(".hasDatePicker").datepicker();
    

    类名是hasDatepicker 而不是hasDatePicker。那是一个棘手的问题:D

    【讨论】:

    • 谢谢!这解决了问题!
    猜你喜欢
    • 1970-01-01
    • 2010-11-09
    • 2015-02-12
    • 2011-05-22
    • 2014-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-19
    相关资源
    最近更新 更多