使用append后jQuery的contenteditable选择器失效问题

嘿，我明白你遇到的麻烦了——动态添加可编辑div后，jQuery没法正确选中它们或者获取内容对吧？咱们来一步步搞定它：

第一步：修复动态添加元素的选择器错误 #

你代码里的第一个问题是选择器写错了：在点击事件里，你写的是$("itemContainer")，但itemContainer是类名，前面必须加.，不然jQuery会把它当成标签名去找（根本不存在这种标签），所以新元素根本没被添加到页面里！

修正后的点击事件代码：

$(function() {
  $("#addItem").click(function() {
    // 这里加了 . 来选中类名为itemContainer的元素
    $(".itemContainer").append('<div class="item" contenteditable="true">新项</div>');
  });
});

第二步：正确获取所有可编辑元素的值 #

不管是一开始就有的静态元素，还是后来动态添加的，只要用正确的选择器选中所有.item元素，就能遍历获取它们的内容。比如我们可以加一个按钮来触发获取操作，或者直接在需要的时候遍历：

完整示例代码 #

HTML部分（新增一个获取值的按钮）

<input type="button" id="addItem" value="Add item" />
<input type="button" id="getValues" value="Get all item values" />
<div class="itemContainer">
  <div class="item" id="item1" contenteditable="true"> Item 1 </div>
  <div class="item" id="item2" contenteditable="true"> Item 2 </div>
</div>

JavaScript部分

$(function() {
  // 添加新项的逻辑（已修复选择器）
  $("#addItem").click(function() {
    $(".itemContainer").append('<div class="item" contenteditable="true">新项</div>');
  });

  // 获取所有可编辑项的值
  $("#getValues").click(function() {
    // 遍历所有带item类的元素
    const itemValues = [];
    $(".item").each(function() {
      // 使用text()获取纯文本内容，trim()去掉首尾空格
      const content = $(this).text().trim();
      itemValues.push(content);
    });
    // 输出结果，你可以换成自己的业务逻辑
    console.log("所有项的内容：", itemValues);
    alert("所有项内容：\n" + itemValues.join("\n"));
  });
});

关键说明 #

• 动态添加的元素和静态元素一样，只要选择器正确（比如.item），jQuery就能选中它们，不需要额外的事件委托（除非是绑定点击这类交互事件，但这里只是获取内容，直接选择就行）。
• 用text()获取纯文本内容，html()可以获取带标签的内容，根据你的需求选择；trim()用来去掉用户输入时可能带的首尾空格，让结果更整洁。

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