Question

我有一个jQuery UI Datepicker并使用它进行内联编辑，即我最初将日期显示为标签，点击它取代可编辑的日期选择器和选择，我做2件事; 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
}

Answer 1

在“更改”事件中添加data-previouse-event =“已更改”

$(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中的blur事件之前添加注册回调。这很容易做到，我自己用这个来管理。

然后在模糊事件上添加：

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

jQuery UI Datepicker在日期选择时阻止模糊事件

1 个答案: