单击锚标记上未触发的事件

click event not firing on anchor tag

本文关键字：事件 单击      更新时间：2023-09-26

点击事件未触发。

我的<<p> strong> HTML : 
<tr>
    <td>121345</td>
    <!-- Other td-elements -->
    <td><a href = "#" class = "remove-item">Remove</a></td>
</tr>
Javascript

我的: 

window.document.load = function()
{
    document.getElementsByClassName('remove-item').onClick(function(element)
    {
        console.log("element");
        var productId = element.parentElement.parentElement.childElements[0].value;
        console.log(productId);
    });
};

我不想用jQuery。

你犯了一些错误:

  • document.getElementsByClassName返回多个元素
  • .onClick(...)不是添加onclick处理程序的方式

下面的代码段将在点击Remove按钮时删除父<tr>元素:

var items = document.getElementsByClassName('remove-item');
for(var i = 0; i < items.length; i++)
{
  var item = items[i];
  item.onclick = function(e)
  {
    e.target.parentNode.parentNode.style.display = "none";
  };
}
<table>
  <tr>
    <td>Test 1</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
  <tr>
    <td>Test 2</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
  <tr>
    <td>Test 3</td>
    <td><a href="#" class="remove-item">Remove</a></td>
  </tr>
</table>

问题是getElementsByClassName返回一个集合元素—而不是单个元素，因为类可以应用于多个元素。来自文档:

返回具有所有给定类名的所有子元素的类数组对象。

只使用[0]访问返回类数组对象中的第一个元素(该类的第一个元素)。

onClick也不是添加事件处理程序的正确方式。您可以使用addEventListener，它接受一个事件和一个处理程序:

window.document.load = function() {
    document.getElementsByClassName('remove-item')[0].addEventListener("click", function(element) { //add click handler to first element with remove-item class
        console.log("element");
        var productId = element.parentElement.parentElement.childElements[0].value;
        console.log(productId);
    });
}

如果您打算对每个具有事件的元素应用一个点击处理程序，您可以使用Array.prototype.forEach:

var elements = document.getElementsByClassName('remove-item');
Array.prototype.forEach.call(elements, function(currentElement) {
    console.log("element");
    var productId = currentElement.parentElement.parentElement.childElements[0].value;
    console.log(productId);
});

forEach遍历类数组对象的每个元素，并对每个元素(存储在currentElement中)执行回调。

相关文章：