Question

I am trying to handle the same onSelect event on a jquery datePicker object twice. From what i understand the event can be handled multiple times, but when i try this only one of the event handlers gets fired. It seems to fire the second handler, but not the first. How can i handle the same onSelect event twice without overriding the first one? This is the problem code snippet.

$(document).ready(function(){
    $('.test').datepicker();
    ...
    $('.test').datepicker('option', 'onSelect', function(dateText, inst) { alert('one'); });
}

...

$(document).ready(function(){
    $('.test').datepicker('option', 'onSelect', function(dateText, inst) { alert('two'); });
}

Answer 1

The code you’re using is just replacing the first onSelect handler with the second. If you want to do two things, then you’ll need to first get the existing onSelect handler then call it from within the handler that you are replacing it with.

$(function() {
     $('.test').datepicker();
     $('.test').datepicker('option', 'onSelect', function(dateText,inst) { alert('one'); } );
     var prevHandler = $('.test').datepicker('option','onSelect');
     $('.test').datepicker('option', 'onSelect', function(dateText,inst) { prevHandler(dateText,inst); alert('two'); } );
});