onSelect event of DatePicker not rise

Question

I have datepicker (Index.aspx):

<form class="fancy_form">
   <div class="wrap_input">
       <i>&nbsp;</i>
       <input type="text" class="datepicker"/>
    </div>
</form>

and js function (Index.aspx)

 $(document).ready(function () {
 $(".datepicker").datepicker({
            onSelect: function (dataText, inst) {
                loadFilmList(dataText);
            }
        });
    });

When I select date loadFilmList not call.

One detail:

There are main.js file where wrote:

jQuery(function($){
        $.datepicker.regional['ru'] = {
            closeText: 'Закрыть',
            prevText: '<',
            nextText: '>',
            currentText: 'Сегодня',
            monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
            'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
            monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
            'Июл','Авг','Сен','Окт','Ноя','Дек'],
            dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
            dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
            dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
            weekHeader: 'Не',
            dateFormat: 'dd.mm.yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        };
        $.datepicker.setDefaults($.datepicker.regional['ru']);
    });

$(function(){
        $(".datepicker").datepicker({
            showOn: "button",
            buttonImage: "/assets/images/calendar.png",
            buttonImageOnly: true
        });
});

UPDATE: Ok, error was found, Thanks to Pencho. But, I can't moving this block to main.js. Question: How to add event handler after datepicker creation?

Thanks.

Answer 1

Its just working fine. Keep the function loadFilmList inside $(document).ready.

check this fiddle : http://jsfiddle.net/gG8ZQ/

 $(document).ready(function () {
 $(".datepicker").datepicker({
            onSelect: function (dataText, inst) {
                loadFilmList(dataText);
            }
        });

function loadFilmList(dataText){
    alert(dataText);
}
});

Answer 2

your main.js is creating the datepicker here:

$(function(){
        $(".datepicker").datepicker({
            showOn: "button",
            buttonImage: "/assets/images/calendar.png",
            buttonImageOnly: true
        });
});

Try moving your onSelect like so:

$(function(){
        $(".datepicker").datepicker({
            showOn: "button",
            buttonImage: "/assets/images/calendar.png",
            buttonImageOnly: true,
            onSelect: function (dataText, inst) {
                alert("a");
            }
        });
});

here is a jsfiddle