Javascript 在动态创建元素上使用not（选择器）

代码基本上是编辑表格单元格。 我想使用not（）方法，以便每次在创建的临时输入之外单击时，都用表单元格替换它。我猜代码在一个块中运行，没有检测到id为“replace”的任何输入，那么我如何修复它呢？ 我还想存储触发第一个事件（dblclick）的元素（th或td），这样我就可以用正确类型的单元格替换输入，但它似乎只存储第一个触发事件的元素，我真的不明白为什么

完整代码

$（函数（）{
$（文档）.on（“dblclick”，“th，td”，函数（事件）{
var cellText=$（this.text（）；
$（此）。替换为（“”）；
var$typeCell=$（event.currentTarget）；//存储触发事件的元素
$（“body”）.not（#replace”）。在（“click”上，函数（）{/.not（）方法
cellText=$（“#替换”）.val（）；
如果（$typeCell.is（“th”））{
$（“#替换”）.replace为（“+cellText+”）；
}
否则{
$（“#替换”）.replace为（“+cellText+”）；
}
});
});
});

我修改了HTML和JavaScript以避免任何可能的错误。正确的做法是将所有

th

封装在

thead

中，将所有

td

封装在

tbody

中

$（文档）.on（“dblclick”，“th，td”，函数（事件）{
var cellText=$（this.text（）；
$（此）。替换为（“”）；
});
$（“正文”）。在（“单击”，函数（）{
如果（event.target.id！=“replace”&&$（“#replace”）.length！=0）{
var cellText=$（“#替换”）.val（）；
if（$（'#replace'）.parents（）是（'thead'））
$（“#替换”）.replace为（“+cellText+”）；
其他的
$（“#替换”）.replace为（“+cellText+”）；
}
});
表格{
边界塌陷：塌陷；
利润率：20px；
最小宽度：100px；
}
桌子
th，
运输署{
边框：1px纯灰；
填充：4px；
}
th{
背景：春绿；
}
tr:n个孩子（奇数）{
背景：rgba（0255127,0.3）；
}

联合国组织
磁盘操作系统
特雷斯
数据1
数据2
数据3
数据4
数据5
数据6
每次打开文本框时，您都要绑定一个新的附加
单击
处理程序。这将很快失去控制。无论如何，由于只有一个
主体
，并且它没有ID
#replace
，因此您的
.not（）
是无用的。相反，绑定到
正文
一次，检查
#replace
是否存在但不是事件的目标，然后继续。
$(function () {
  $(document).on("dblclick", "th, td", function (event) {
    var cellText = $(this).text();
    $(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
    var $typeCell = $(event.currentTarget);      // Store element which trigger the event     
    $("body").not("#replace").on("click", function () {       // .not() method
      cellText = $("#replace").val();
      if ($typeCell.is("th")) {
        $("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
      }
      else {
        $("#replace").replaceWith("<td>" + cellText + "</td>");
      }
    });
  });
});