使用 getElementById 写入 div 时，javascript 类不起作用

Question

我一直在使用一个名为 tcal 的 datepicker js 类。链接到服务器上的类后，只需一行代码即可调用它。

在标题中

<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>

html

Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>

一直运行良好。

但是，为了简化页面，我现在尝试将其从 html 中取出并仅在用户使用 getElementById 单击它时将其显示在 div 中。虽然我可以显示输入框，但是当以这种方式写入浏览器时，该类似乎不再起作用。

js

function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}

html

<a href="javascript:void();" onclick="pickDate();">Pick Date</a><div id="show"></div>

当用户点击时，会出现输入框。但是，当您单击 tox 时，不会弹出 datepicker 日历。有谁知道为什么 tcal 在以这种方式写入浏览器时不起作用？

感谢您的任何建议。

Answer 1

发生这种情况的原因是您稍后在 dom 中添加输入框，您的 datepicker 代码被初始化只需重新初始化 datepicker 代码

正如我所见，您的库可能没有要初始化的代码，您可以单独进行隐藏和显示，而不是稍后添加到 dom 中，如果文本框在页面开始时可用，它将被初始化所以使用下面的代码

html -

<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>

js -

document.getElementById('something').style.display="block";