JQuery UI datepicker wywołany z linku tekstowego

Próbuję skonfigurować moje menu css, tak aby jedno z łączy tekstowych uruchamiało calandar datepicker. Rozebrałem wszystko do poniższego kodu. Problem, który napotykam, polega na tym, że poniższy kod nie działa, ale po usunięciu tagów ul, li zaczyna działać.

Używam 1.8.0 JQuery i 1.8.23 JQuery UI.

<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $("#datep").click(function() {
        $("#dp").datepicker("show");
    });
});
</script>
</head>
<body>
<ul>
    <li><a href="#" id="datep">Test</a><input type="hidden" id="dp" /></li>
</ul>
</body>
</html>

Niektóre dziwne rzeczy, które zauważyłem. Jeśli przeniosę dane wejściowe pod ul, to działa, ale dostanie błąd po kilku kliknięciach i wyłączeniach, ale jeśli dodam pusty div pod tym wejściem, to zacznie działać normalnie.

Każda pomoc jest bardzo mile widziana.

questionAnswers(3)

yourAnswerToTheQuestion