Javascript JQuery无法从动态添加的输入中获取值

我打算在这里运行以下脚本：

<script>
    $(document).ready(function () {
        var sd = $("#StartDate").val();
        var ed = $("#EndDate").val();
        $("#userReportGenerate").click(function (e) {
            e.preventDefault();
            console.log(sd);
            console.log(ed);
            $("<input/>").attr("type", "hidden").attr("id", "uStartDate").attr("name", "StartDate").attr("value", sd).appendTo("userReportForm");
            $("<input/>").attr("type", "hidden").attr("id","uEndDate").attr("name", "EndDate").attr("value", ed).appendTo("userReportForm");
            console.log($("#uStartDate").val());
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
var sd=$（“#开始日期”）.val（）；
var ed=$（“#EndDate”）.val（）；
$（“#userReportGenerate”）。单击（函数（e）{
e、 预防默认值（）；
控制台日志（sd）；
控制台日志（ed）；
$（“”）.attr（“type”，“hidden”）.attr（“id”，“uStartDate”）.attr（“name”，“StartDate”）.attr（“value”，sd）.appendTo（“userReportForm”）；
$（“”）attr（“类型”、“隐藏”）.attr（“id”、“uEndDate”）.attr（“名称”、“结束日期”）.attr（“值”，编辑）。附录（“用户报告表单”）；
log（$（“#uStartDate”）.val（））；
返回false；
});
});

但是，当我点击按钮时，我没有得到uStartDate ID的值。它只是在我的控制台上显示为空白

是否可以从该输入中获取值

我打算在提交表单时将开始日期和结束日期与表单一起传递。

$（文档）。就绪（函数（）{
 $(document).ready(function () {
    var sd = $("#StartDate").val();
    var ed = $("#EndDate").val();
    $("#userReportGenerate").click(function (e) {
        e.preventDefault();
        let uStartDate='<input type="hidden" id="uStartDate" name="StartDate" value="'+sd+'">';
        $('#userReportForm').append(uStartDate); 
        return false;
    });
});

var sd=$（“#开始日期”）.val（）；
var ed=$（“#EndDate”）.val（）；
$（“#userReportGenerate”）。单击（函数（e）{
e、 预防默认值（）；
让uStartDate=“”；
$（'#userReportForm'）。追加（uStartDate）；
返回false；
});
});

id必须是唯一的。您可以将对象传递给

.attr（）

：

.attr（{type:“hidden”，id:“uStartDate”，name:…}）

.appendTo（“userReportForm”）

-选择器错误。修好它，它就会工作。你改变了什么？为什么？虽然这段代码可以回答这个问题，但提供关于它如何和/或为什么解决问题的附加上下文将提高答案的长期价值。