I have a form that uses a calendar table to help the user pick the date. The calendar is only visible when the user clicks on a button that makes the calendar appear under the input field for the date.
The calendar itself is located at the same DOM level as the form and is initialized with display:none
; like this:
<html>
<body>
<form class="my-form">
...
</form>
<div class="my-calendar" style="display:none">
<table>
<tr>
<td><a>firstday</a><td>
...
</tr>
</table>
</div>
</body>
</html>
When the user clicks on the calendar button in the form the calendar is displayed and the user can then choose the day with a click. This works as expected on all browsers, but when I tested it on the IPad it behaves quite unexpected. When clicking on a day , it does not select the day but the whole table, which has no action on JavaScript and then clicks on the element that is geographically under that day. Even if for some reason the click is triggering event capturing instead of event bubbling shouldn't the click go to an element above the hierarchy of "my-calendar" and not an element inside the form. Anyone knows what's going on I cant figure this one out.
UPDATE: I managed to get rid of part of the behavior by not turning animations off ($.fx.off
) Now my problem is that when clicking on the next month button the month changes but the focus is lost and the datepicker disappears. The last operation performed by the datepicker while clicking on the "next month" button is that it gives the focus to the table with the new month. Like i said this works fine on all browsers except mobile Safari. I cannot use any datepicker for legacy issues of the framework being used. Any开发者_开发问答 Ideas on what the problem could be?
精彩评论