JQuery实现点击列表链接生成对应文本DIV的问题

问题根源有两个：

• DOM 中 ID 是唯一标识，document.getElementById("source")只会获取第一个匹配该 ID 的元素，导致事件仅绑定在第一项上
• 事件处理里直接使用source.innerHTML，永远只会取第一个元素的内容，即便其他项能触发事件也无法得到正确结果

按以下步骤修改即可解决：

1. 将所有列表项的id="source"改为class="source"——class 支持给多个元素复用，适合批量选择
2. 修改 JS 代码，选中所有.source元素绑定点击事件，通过$(this)获取当前被点击的列表项

修改后的代码： #

$(".source").on("click", function () {
  // 用text()仅提取纯文本，比html()更安全，避免意外插入未知HTML标签
  $("#feed-grid").append($('<div class="feed">' + $(this).text() + "</div>"));
});

如果你的列表是动态生成的（比如后续通过JS添加到页面），可以用事件委托绑定到父元素，确保新添加的列表项也能生效：

// 替换为你实际的列表父元素选择器（比如ul）
$("ul").on("click", ".source", function () {
  $("#feed-grid").append($('<div class="feed">' + $(this).text() + "</div>"));
});

这样无论点击哪个列表项，都会生成对应文本的DIV，且无需给每个元素设置唯一ID。

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