a.nodeName是未定义的Jquery错误

Question

a.nodeName未定义

我查阅了相关资料，但解释对我来说并不清晰。

function deleteThisRow() {
    $(this).closest('tr').fadeOut(400, function(){
        $(this).remove();
    });
}

<tr>
    <td>blah blah blah</td>
    <td>
        <img src="/whatever" onClick="deleteThisRow()">
    </td>
</tr>

- Barney

---

在 deleteThisRow 函数内，this 将会指向 window，而不是图片。为什么不使用 jQuery 绑定事件处理程序呢？ - Felix Kling

Answer 1

this关键字在您的函数中并不指向被单击的元素。默认情况下，它将指向DOM中最高的元素，即window。

要解决此问题，您可以使用一个非侵入式事件处理程序，而不是过时的on*事件属性，因为它们在引发事件的元素的范围内运行。试试这个：

$("tr td img").click(deleteThisRow);

function deleteThisRow() {
  $(this).closest('tr').fadeOut(400, function() {
    $(this).remove();
  });
}

img {
  width: 20px;
  height: 20px;
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>blah blah blah 1</td>
    <td><img src="/whatever"></td>
  </tr>
  <tr>
    <td>blah blah blah 2</td>
    <td><img src="/whatever"></td>
  </tr>
  <tr>
    <td>blah blah blah 3</td>
    <td><img src="/whatever"></td>
  </tr>
</table>

- Rory McCrossan

---

事实上，这个错误意味着你错误地使用了$(this)。在这种情况下，我试图调用一个函数，假设它将从特定事件中调用，在该事件之外。 - neminem

有趣的是，几年后我忘记了这件事，又做了同样的事情，发现这个评论非常有用，想要点赞，但却发现原来是我自己写的。谢谢我自己！:D - neminem

这实际上是我的问题的答案，只是我花了很长时间才意识到。谢谢！我将一些代码移动到一个函数中，但没有将$(this)引用更改为input[name=etc]引用。 - AdheneManx

Answer 2

尝试：

$(document).ready(function() {
    $("img").click(function() {
        $(this).closest('tr').fadeOut(400, function(){
            $(this).remove();
        });
    });
});

- Sudhir Bastakoti

Answer 3

我遇到了类似的问题，解决方法是从箭头函数切换到传统的命名函数。有时候老的东西也很有价值，但我相信问题的根本原因一定存在。

这个方法不起作用：

$(document).ready(() => {
  $('#client_id').change(() => {
    const clientId = $(this).val();
    console.log(clientId);
  });
});

控制台输出的错误信息：

类型错误：i.nodeName未定义

进一步调查发现，'$（this）'调用的是窗口对象，而不是选择元素。（正如Rory在https://dev59.com/fF_Va4cB1Zd3GeqPQidR#8817193中指出的那样）

这个方法有效。一个值被打印到控制台。

$(document).ready(() => {
  $('#client_id').change(function changeClient() {
    const clientId = $(this).val();
    console.log(clientId);
  });
});

更新

这是箭头函数的一个限制。我引用一下，"没有自己的this或super绑定，并且不应该被用作方法。" 由于上面的jQuery方法使用了'this'上下文，所以在这种情况下应避免使用箭头函数，而应该使用传统的函数表达式。这里是文档来支持这个观点。

- Wachaga Mwaura