在 Javascript 中替换 innerHTML 后，复选框上的 OnClick 事件在 IE 中不起作用答案

【问题标题】：OnClick event on checkbox is not working in IE after replacing innerHTML in Javascript在 Javascript 中替换 innerHTML 后，复选框上的 OnClick 事件在 IE 中不起作用
【发布时间】：2014-01-31 05:17:28
【问题描述】：

我通过在 div 中设置 innerHTML 来创建一个动态复选框。此复选框上有 onclick 事件。该代码在除 IE8 之外的所有浏览器中都能正常运行。

看起来 IE 在设置 innerHTML 后没有绑定事件。有没有办法重新绑定事件？

下面是innerHTML代码。

<INPUT id=Animal onclick=\"updateHTML();\" name=Control value=Animal type=checkbox uncheckedValue=\"0\" checkedValue=\"1\">
<INPUT id=Food onclick=\"updateHTML();\" name=Control value=Food type=checkbox uncheckedValue=\"0\" checkedValue=\"1\">

下面是完整代码

<HTML>
<HEAD>
    <SCRIPT>
        function updateHTML()
        {
            alert('updateHTML');
        }
        function changeEvent()
        {
            var innerhtml="\r\n<TBODY id=originalDiv><TR>\r\n<TD title=\"\">\r\n<INPUT id=Animal onclick=\"updateHTML();\" name=Control value=Animal type=checkbox uncheckedValue=\"0\" checkedValue=\"1\">Animal\r\n<INPUT id=Food onclick=\"updateHTML();\" name=Control value=Food type=checkbox uncheckedValue=\"0\" checkedValue=\"1\">Food\r\n</TD></TR></TBODY>";
            var originalDiv=document.getElementById('originalDiv');
            var temp = originalDiv.ownerDocument.createElement('div');
            temp.innerHTML = '<table>' + innerhtml + '</table>';
            originalDiv.replaceChild(temp.firstChild, originalDiv.firstChild);
        }
    </SCRIPT>
</HEAD>
<BODY>
    <TABLE>
        <TBODY id ="originalDiv">
            <TR>
                <TD vAlign=middle>
                    <INPUT id=Bird onclick=\"updateHTML();\" name=Control value=Bird type=checkbox uncheckedValue=\"0\" checkedValue=\"1\">Bird
                </TD>
            </TR>
        </TBODY>
        <TBODY id="submit">
            <TR>
                <TD>
                    <input type=button value="Submit" onclick="changeEvent()">
                </TD>
            </TR>
        </TBODY>
    </TABLE>
<BODY>

【问题讨论】：

updateHTML 是做什么的？可以出示一下代码吗？
updateHTML 只有一个警报。
好的，那么你能显示创建复选框的代码吗？
使用element.onclick = function() {...}而不是使用元素的onclick属性，不显眼地绑定事件会更好。
IE8 调试器有没有报错？

标签： javascript html checkbox

【解决方案1】：

首先，你应该解决这个问题：

添加文档类型。这对 IE 很重要
在文档末尾添加一个html结束标签
关闭所有输入标签，如下所示：

<input type="checkbox" id="Bird" value="1" />

如果你使用非html属性，使用“data-”前缀：

<input type="checkbox" id="Bird" value="1" data-unckecked-value="0" data-checked-value="1" />

【讨论】：

这应该是评论，因为它与问题没有直接关系。
评论要长一点...问题可能来自未关闭的输入标签。
首先这段代码不是别人写的。它是由一些第三方 Java 库生成的。据我所知，代码是由 JAVA 类生成的。实际上这段代码是通过 javascript 注入到 JSP 中的。
@gtournie - 可能是这样，但只要是这样，恐怕它仍然不是答案。
您可能有一些选项可以让您的代码更简洁。有没有生成 XHTML 的？添加文档类型？