使用jQuery UI日期選擇器進行內聯編輯

Question

我正在嘗試對日期字段實施內聯編輯（使用jQuery UI日期選擇器）

我使用的代碼如下：

$(document).on("click",".editableDateTxt", function () {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px' ,'data-model-id': currElmModelId, 'data-model-attr': currElmModelAttr, 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();

    input.datepicker().focus();

});

$(document).on("change", ".datePicker", function () {
    //alert($(this).val());
    var dataValid = $(this).attr('data-valid');
    if (dataValid == "Y") {
        var currElmModelId = $(this).attr('data-model-id');
        var currElmModelAttr = $(this).attr('data-model-attr');
        var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
        var parent = $(this).parent();
        parent.append(divEle);
        $(this).remove();
    }
});

$(document).on("blur",".datePicker", function () {
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }

    }   
});

現在，當我選擇任何日期或模糊時，會出現以下錯誤；

該日期選擇器缺少實例數據

我認為這個問題與使用data（）的jQuery UI datepicker有關，所以我嘗試使用detach（）而不是remove（）...

所以我只是用$（this）.detach（）;

您能否指導我使用detach（）的正確方法來解決問題...

Answer 1

您可能遇到了與我相同的問題。 在日期選擇器完成其工作之前，onblur中的代碼將觸發，因此在完成日期選擇器之前您將丟失輸入對象。

我可以通過對此問題的可接受答案中的一項建議來解決此問題： https : //stackoverflow.com/a/1814308/3434790

在我的方案中起作用的解決方案是將我的代碼包裝在setTimeout中的on模糊函數內，該方法可以有效地使代碼在datepicker完成其工作后運行。

對於您的情況，我建議以下幾點：

$(document).on("blur",".datePicker", function () {
setTimeout(function(){
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }
    }   
},100);

}）;