JQuery-UI Datepicker（）click事件似乎与自定义事件冲突

Question

I'm a bit confused by some behavior on the frontend. Im using the datepicker() method from the JQuery UI libraries, and when a date is first selected, I want the calendar to slide left to display the rest of a form. That works fine unless the previous/next month elements are clicked first. Then the DOM changes(possibly unrelated) and nothing else happens. The calendar stays in its original position and the form never shows up. It's like the event listener that I wrote is being overridden. I'm assuming I just have a fundamental misunderstanding of event handling with javascript/jquery. Im a backend developer with only the slightest frontend experience, so if anyone could explain to me what im doing wrong, I'd be greatly appreciative.

Here's a super simplified example that creates the same behavior:

HTML:

<div id="calendar"></div>

CSS:

#calendar {
    position:relative;
    left:10em; }

JS:

$(document).ready(function () {  
    $("#calendar").datepicker();  
    $("#calendar tbody td").click(function () {  
        $("#calendar").animate({  
            left: "-30px",  
            easing: 'swing'  
        });  
    });  
});  

And here is a fiddle: http://jsfiddle.net/HM9ea/

Answer 1

Try this with onSelect :

$("#calendar").datepicker({
    onSelect: function () {
        $(this).animate({
            left: "-30px",
            easing: 'swing'
        });
    }
});

Demo

---

Issue with your code is that you were trying to animate a object which was not presenet at the state of document ready. so your event does not get fired, instead you can use the builtin method of select onSelect .