使用 'innerHTML' 不显示日期选择器

Question

我正在使用 "Modernizr 2.6.2" 的日期选择器，它非常有用。
它在这个示例代码中工作得很好

  <script>
$(function() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    }
});
</script>
    ...
<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem">

但是，我遇到了一个问题。我发现它在下面的例子中不起作用。

<td ondblclick="modifySelector(this.id)" id="nof_{{ ownProblem.courseId }}_{{ ownProblem.problemId }}_{{ ownProblem.isAllInputCaseInOneFile }}">{{ ownProblem.isAllInputCaseInOneFile }}</td>`
<script>
function modifySelector(target){
    if(target.substring(0, 3)=="nof"){
        if( document.getElementById(target).innerHTML == "OneFile")
            document.getElementById(target).innerHTML = "MultipleFiles";
        else
             document.getElementById(target).innerHTML = "OneFile";
    }
    else if(target.substring(0, 9)=="startDate"){
        document.getElementById(target).innerHTML = '<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem">;
    }
}

</script>

我猜，区别是直接写了还是间接写了 'innerHTML' 我认为这是关于优先级或与 DOM 相关的事情。但我不知道如何清楚地解决它。

Answer 1

解决了。
我在 'input' 标签上添加了 'onmousedown' 事件。
就像下面的例子。

<script>
if(target.substring(0, 9)=="startDate"){ 
    document.getElementById(target).innerHTML = '<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem" onmousedown="datepick();">';
}    

// added here new function
function datepick() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    }
}
</script>

现在可以使用了。谁知道另一种解决方法，回答我。

谢谢！

使用 'innerHTML' 不显示日期选择器

datepicker doesn't display by using 'innerHTML'

javascript

datepicker