Datumsauswahl der JQuery-Benutzeroberfläche wird über Textlink ausgelöst

Ich versuche, mein CSS-Menü so einzurichten, dass einer der Textlinks das Öffnen eines Datepicker-Kalenders auslöst. Ich habe alles auf den folgenden Code reduziert. Das Problem, auf das ich stoße, ist, dass der folgende Code nicht funktioniert, aber wenn ich die ul, li-Tags entferne, funktioniert er.

Ich verwende 1.8.0 JQuery und 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>

Einige seltsame Dinge, die mir aufgefallen sind. Wenn ich die Eingabe unter die ul verschiebe, funktioniert es irgendwie, aber nach ein paar Klicks wird ein Fehler angezeigt, aber wenn ich unter dieser Eingabe eine leere div hinzufüge, funktioniert es anscheinend normal.

Jede Hilfe wird sehr geschätzt.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage