无法再次从Wicket renderHead方法执行Javascript

我正在将日期组件（fromDate和toDate）转换为。为此，我在wicket中创建了一个文本字段，然后在该文本字段上执行脚本以生成所需的输出。但是，我只得到第一个文本字段转换为日期组件，第二个不是，因为脚本没有在它上执行。请参阅下面的图片和代码

HTML:

<span wicket:id="rangeDateValue" style="width:400px">
    <span class="input">
        <div class="input-group date">
            <input wicket:id="fromDateValue" class="std" />
        </div>
    </span>
    <span class="input">
        <div class="input-group date">
            <input wicket:id="toDateValue" class="std" />
        </div>
    </span>
</span>

Java

public DateRangePicker(final MarkupContainer parent, String id, IModel<RangeDateModel> model)
    {
        super(id, model);
        this.startDateTime = addValueDatePickerNew(this, "fromDateValue", new PropertyModel<String>(model, "fromDate"));
        this.endDateTime = addValueDatePickerNew(this, "toDateValue", new PropertyModel<String>(model, "toDate"));
        this.add(new DateTimeRangeValidator());
        parent.add(this);
    }

private TextField<String> addValueDatePickerNew(final MarkupContainer parent, final String id, final IModel<String> model)
{
    final TextField<String> result = new TextField<String>(id, model) {
        private static final long serialVersionUID = 1L;

        public void renderHead(IHeaderResponse response) 
        {
            String jsDateField = "jQuery(function () {"
                    + "var idDate = jQuery(\"input[name*='dateValue' i]\").attr('id');\n"
                    + "console.log(\"idDate: \"+idDate);\n"
                    + "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
                    + "var idDateValField = jQuery('#' +idDate);\n"
                    + "idDateValField.datetimepicker({\n"
                    + "useCurrent: false,\n"
                    + "collapse: true\n"
                    + "});\n"
                    + "idDateValField.after(calIcon);\n"
                    + "idDateValField.next('span.input-group-addon').click(function(e) {\n"
                    + "idDateValField.focus();\n" 
                    + "});\n"
                    + "});";
            response.renderOnDomReadyJavaScript(jsDateField);
        }
    };
    result.setOutputMarkupId(true);
    parent.add(result);
    return result;
}

publicDateRangePicker（最终标记容器父项、字符串id、IModel模型）
{
超级（id，型号）；
this.startDateTime=addValueDatePickerNew（这是“fromDateValue”，新的PropertyModel（模型，“fromDate”）；
this.endDateTime=addValueDatePickerNew（这个“toDateValue”，新的PropertyModel（模型，“toDate”）；
add（新的DateTimeRangeValidator（））；
父项。添加（此项）；
}
私有文本字段addValueDatePickerNew（最终标记容器父项、最终字符串id、最终IModel模型）
{
最终文本字段结果=新文本字段（id，型号）{
私有静态最终长serialVersionUID=1L；
公共无效renderHead（IHeaderResponse响应）
{
String jsDateField=“jQuery（函数（）{”
+“var idDate=jQuery（\“input[name*='dateValue'i]\”）.attr（'id'）；\n”
+“console.log（\“idDate:\”+idDate）；\n”
+“var calIcon=\”\“；”
+“var idDateValField=jQuery（'#'+idDate）；\n”
+“idDateValField.datetimepicker（{\n”
+useCurrent:false\n
+“折叠：真\n”
+“}）；\n”
+“idDateValField.after（calIcon）；\n”
+“idDateValField.next（'span.input group addon'）。单击（函数（e）{\n”
+“idDateValField.focus（）；\n”
+“}）；\n”
+ "});";
renderOnDomReadyJavaScript（jsDateField）；
}
};
result.setOutputMarkupId（true）；
添加（结果）；
返回结果；
}

我只收到“fromDate”而不是“toDate”的控制台语句。由于两者都在同一个DOM中，并且脚本在DOM就绪后执行，因此我假设它仅适用于“fromDate”，并且无法获得正确的执行方法。

尝试将标记id“注入”到javascript代码中：

 String jsDateField = "jQuery(function () {"
                    + "var idDate = '" + getMarkupId() +"';\n"
                    + "console.log(\"idDate: \"+idDate);\n"
                    + "var calIcon = \"<span class='input-group-addon dateTimePick'><span class='glyphicon glyphicon-calendar'></span></span>\";"
                    + "var idDateValField = jQuery('#' +idDate);\n"
                    + "idDateValField.datetimepicker({\n"
                    + "useCurrent: false,\n"
                    + "collapse: true\n"
                    + "});\n"
                    + "idDateValField.after(calIcon);\n"
                    + "idDateValField.next('span.input-group-addon').click(function(e) {\n"
                    + "idDateValField.focus();\n" 
                    + "});\n"
                    + "});";
            response.renderOnDomReadyJavaScript(jsDateField);

String jsDateField=“jQuery（函数（）{”
+“var idDate=”“+getMarkupId（）+”；\n”
+“console.log（\“idDate:\”+idDate）；\n”
+“var calIcon=\”\“；”
+“var idDateValField=jQuery（'#'+idDate）；\n”
+“idDateValField.datetimepicker（{\n”
+useCurrent:false\n
+“折叠：真\n”
+“}）；\n”
+“idDateValField.after（calIcon）；\n”
+“idDateValField.next（'span.input group addon'）。单击（函数（e）{\n”
+“idDateValField.focus（）；\n”
+“}）；\n”
+ "});";
renderOnDomReadyJavaScript（jsDateField）；

检查用于获取idDate的jquery选择器。您正在选择两个输入标记，但是.attr（'id'）只返回第一个选定标记的id。是的，good catch@Andrea Del Bene。我已将id查找代码替换为`var idDateValField=jQuery（'#“+uniqueId+”）\n`where_uniqueId_uu是从UUID创建的。现在是

var-idDateValField=jQuery（“#8a948a245c5fbada015c5fc54d210015”）这一次
idDateValField.datetimepicker（..）
仍然不工作..太棒了。这是一个比通过UUID创建唯一id更干净的解决方案。Thq@Andrea Del Bene