jQuery UI Datepicker 防止日期选择模糊事件答案

【问题标题】：jQuery UI Datepicker prevent blur event on date selectjQuery UI Datepicker 防止日期选择模糊事件
【发布时间】：2014-08-10 22:13:36
【问题描述】：

我有一个 jQuery UI Datepicker 并将其用于内联编辑，即我最初将日期显示为标签，然后单击它替换为可编辑的日期选择器，然后在选择时，我做了两件事； a）在模型中设置选定的日期（并在我的 changeAction 方法中进行一些验证）和 b) 用标签替换日期文本框（以显示所选日期）

我的问题是如何在选择任何日期时防止模糊事件？我希望仅当用户没有选择任何日期而只是点击退出时才触发模糊事件。

下面是我的代码；

$(document).on("change", ".datePicker", function () {
    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;
        }
    }   
});

changeAction: function (event) {
    var self = this;
// my custom code to set the date in model and do some validations
}

【问题讨论】：

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

在 "change" 事件上添加 data-previouse-event = "changed"

$(document).on("change", ".datePicker", function () {
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();
}

$(this).data("previous-fired-event", "change");
});

如果先调用模糊事件然后更改，请在 jQuery 中的模糊事件之前添加注册回调。这很容易做到，我想你自己解决了这个问题。

然后在模糊事件上添加：

$(document).on("blur",".datePicker", function () {
if ($(this).data("previous-fired-event") === "change")
  return;

  $(this).data("previous-fired-event", "blur");

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

【讨论】：