无法第二次从Wicket renderHead方法执行Javascript

Question

我正在努力将日期组件（fromDate和toDate）转换为Bootstrap Date component。为了做到这一点，我在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>

爪哇

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;
}

我只是为“fromDate”而不是“toDate”获得控制台声明。由于两者都在同一个DOM中，并且在DOM Ready之后执行脚本，我假设它只适用于“fromDate”并且无法正确地执行它。

Answer 1

尝试将标记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);