JQuery On event after element is changed via Javascript

Question

I am trying to create a jquery plugin to do custom validation.

I have a jqueryUI date picker that enters a date into an input field.

I am trying to attach an on change event to the input field that gets populated by the date picker but it isn't firing. I guess because it isn't being changed by the user, it is being updated by JavaScript/jqueryUI.

My question is how can I attach an on change event to a field that is updated via JavaScript and not by the user?

my plugin code:

;(function ($, window) {

    var validateStuff = function(element){

        $(element).on('change', function(event){ 
            console.log( "Handler for .on() called." );
        });

    };


    $.fn.validate = function(options){

        return this.each(function(){

            var elem = $( this );

            validateStuff(elem);

        });
    };

})(jQuery);

UPDATE:

datepicker code

$('.day-picker').datepicker({
    inline: true,
    showOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    onSelect: function (dateText, inst) {
        var startDate = new Date(dateText);
        var selDay = startDate.getDate();
        var selMonth = startDate.getMonth() + 1;
        var selYear = startDate.getFullYear();

        var fieldElement = $(this).siblings(".date-field");

        var selDay = selDay < 10 ? "0" + selDay : selDay;
        var selMonth = selMonth < 10 ? "0" + selMonth : selMonth;

        $(fieldElement).val(selDay + "-" + selMonth + "-" + selYear);
    }
});

Answer 1

When you change the value of the input element, you can trigger the change event:

$(fieldElement).val(selDay + "-" + selMonth + "-" + selYear).change();

Which can also be written as

$(fieldElement).val(selDay + "-" + selMonth + "-" + selYear).trigger('change');

Note: Event handler methods like change() will simply trigger the event if no parameters are passed.