Question

当通过Firefox运行以下代码并单击X按钮时，javascript会将tmpField返回为undefined。我需要获取按钮的parentNode，即div。

<head>
    <title></title>
    <script type ="text/javascript">
        function RemoveItem() {
                if (document.addEventListener) {
                    var container = document.getElementById("InputContainer");
                    var tmpField = this.parentNode;
                    alert("Field: " + tmpField);                 
                }
        }
    </script>
</head>
<body>
<table width="100%">
<tr>
    <td style="width: 10%; vertical-align:top;">Field:</td>
    <td id="InputContainer">
        <div id="divInput1" style="display: inline;">
            <input id="txtComment1" name="txtComment" type="text" maxlength="35" />
            <input id="btnDelete1" value="X" type="button" name="btnDelete" onclick="RemoveItem()" />
        </div>
    </td>
</tr>
</table>
</body>
</html>

在我的场景中，我在“InputContainer”中动态创建多个div。每个div都具有相同的结构，包含一个文本框和删除按钮（ID包含下一个增量）。对我来说重要的是能够返回按钮的parentNode，它始终是div。我有它的代码在IE浏览器而不是Firefox。任何想法如何解决？

...谢谢

Answer 1

使用此HTML：

<input id="btnDelete1" value="X" type="button" name="btnDelete" onclick="RemoveItem(this)" />

这个JS：

function RemoveItem(button) {
    var container = document.getElementById("InputContainer");
    var tmpField = button.parentNode;
    alert("Field: " + tmpField);
}

DEMO： http://jsfiddle.net/jwpds/1/

RemoveItem函数调用的上下文是全局的，因此this引用window。要单击特定元素，您需要在函数调用中传递this，然后将其作为函数中的参数进行访问。

我不知道你为什么要检查document.addEventListener，但我可以向你保证，你不需要你正在做的事情。

使用Firefox运行时，this.parentNode返回undefined

1 个答案: