jQuery Datepicker hangs when input field is re-clicked (Chrome)

问题

I have this jsFiddle: http://jsfiddle.net/VebTY/

It looks this this is only an issue in chrome.

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?

Here is my relevant code:

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

回答1:

You are creating an infinite loop here.

The cause of the problem is on line 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

UPDATE:

Found your problem ! here is a working fiddle

The problem was caused by this line:

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

the class name is hasDatepicker not hasDatePicker. That was a tricky one :D

来源：https://stackoverflow.com/questions/17352695/jquery-datepicker-hangs-when-input-field-is-re-clicked-chrome