on click的行为有点像for each..很难解释

Question

以下是基本场景。我有一组列表元素。

<ul>
  <li>
    <span class="c-id" style="display: none;">1</span>
    <a class="remove_comment">Remove</a>
  </li>
  <li>
    <span class="c-id" style="display: none;">2</span>
    <a class="remove_comment">Remove</a>
  </li>
  <li>
    <span class="c-id" style="display: none;">3</span>
    <a class="remove_comment">Remove</a>
  </li>
</ul>

c-id代表commentID，每个标识符都有自己的唯一标识符。我创建了一个点击事件如下：

$('.remove_comment').on('click', function() {
    var commentBlock = $(this).parent('li');
    var commentID = parseInt(commentBlock.find('.c-id').text());
    console.log(commentID);
});

正如您所看到的，我正在使用控制台来确保它获取适当的ID，它确实做到了。但是，它会对控制台进行3次日志记录。因此，在这个例子中，如果我点击第三个删除链接，它将在控制台中登录#3次。如果我有10个列表元素，并在第三个列表元素上单击remove，它会将数字记录3、10次。因此，它直接关系到页面上有多少li元素。

它为什么要这么做？基本上，我希望它只记录一个时间和一个值。

非常感谢你的帮助。

Answer 1

您可能正在为页面上的每个项目添加事件。但您编写的事件代码适用于所有项目，这意味着每个项目都会得到同一事件的N倍，其中N是您添加的项目数。