jQuery：仅更新被点击元素内文本的问题求助

我明白你遇到的困扰：点击某个可编辑元素时，所有同类型的div文本都会被一起更新，而且你不想额外添加ID或类来区分元素。问题的根源出在你的事件绑定逻辑上——每次hover时都给.hover_edit_me绑定click事件，不仅会造成重复绑定，而且全局选择器会触发多个元素的操作。

直接调整成下面的代码就能解决，完全不需要依赖hover添加的类：

$(".edit_me").on('click', function(e) {
  e.preventDefault();
  const currentElement = $(this);
  // 这里只针对当前被点击的元素进行操作
  // 举个编辑文本的示例逻辑：
  const newText = prompt("请输入新文本");
  if (newText) {
    currentElement.text(newText);
  }
});

原来的代码为什么会出问题？ #

• 每次hover .edit_me元素时，你都会给.hover_edit_me绑定一次click事件，多次hover后同一个元素会积累多个事件处理器，点击时会重复执行逻辑。
• .hover_edit_me是全局选择器，当多个元素拥有这个类时，绑定的事件会作用在所有匹配元素上，导致点击一个元素触发多个文本更新。

额外优化：保留hover样式（如果需要） #

如果你还需要hover时的视觉反馈，直接用CSS伪类:hover实现即可，不用JS动态添加类：

.edit_me:hover {
  /* 写入你原来.hover_edit_me的样式，比如： */
  cursor: pointer;
  background-color: #f0f0f0;
}

这样既保留了交互样式，又避免了JS事件绑定的冗余问题，全程无需额外ID或类，只聚焦当前点击的元素进行操作。

内容的提问来源于stack exchange，提问作者Vicky Parab