Javascript 按钮。在两个删除附加操作后单击“不工作”

我有一个简单的html5购物清单应用程序

以下是我想要的行为：

您可以单击$donebutton，它会将项目从tbdlist移动到donelist。如果意外执行此操作，$Undo按钮会将项目移回tbdlist

下面是接下来应该发生的事情：

当我第二次、第三次、第四次单击$donebutton时，它应该将它从tbdlist移回donelist，但它没有。$donebutton停止工作。我认为$delbutton也会停止工作

有人能帮我了解发生了什么以及如何解决它吗。我认为这与范围界定有关。.click函数都在一个级别上，第二次我们在$donebutton.click函数中，但这对我来说没有意义，因为变量是在顶层声明的。如果变量甚至存在，那么它的方法也应该存在

提前感谢,， 奥马尔

HTML:

$'form'.submitfunctionevent{ 违约事件； 变量$delbutton=$'x'； 变量$listitem=$ var$donebutton=$+$'itemname'.val+； var$itemname=$+$'itemname'.val+； var$nameday=$'yournamedatetoday'； var$undobutton=$'^'； var$doneitem=$； //var$doneitem=$； $listitem.append$donebutton； $listitem.append$nameday； $listitem.append$delbutton； $'tbdlist'。追加$listitem； $'input'.val； $donebutton.clickfunction{ $doneitem.append$itemname； $doneitem.append$nameday； $doneitem.append$undo按钮； $donelist。追加$doneitem； $listitem.remove； }; $delbutton.clickfunction{ $listitem.remove； }; $undobutton.clickfunction{ //变量$delbutton=$'x'； //var$donebutton=$+$'itemname'.val+； $nameday=$'yournamedatetoday'； $listitem=$ $listitem.append$donebutton； $listitem.append$nameday； $listitem.append$delbutton； $'tbdlist'。追加$listitem； $doneitem.remove； }; }; 功能档案{ $'donelist.added'。删除； } $document.readyfunction{ 警惕它； }; /*Jquery负载测试 window.onload=函数{ 如果window.jQuery{ //jQuery已加载 是啊！； }否则{ //jQuery未加载 警报不起作用； } } */ .hdr{ 文本对齐：居中； 颜色：黑色； 字体大小：粗体； 背景：浅蓝色；/*黄色*/ 边框：2件纯黑； 填充：1em； } 主要{ 文本对齐：居中； } tbdlist{ 文本对齐：居中； /*字体大小：粗体*/ 边框：1px纯黑； 列表样式类型：无； } 牙医{ 文本对齐：居中； /*字体大小：粗体*/ 边框：1px纯黑； 列表样式类型：无； } tbdlistli{ 宽度：25%； } donelist li{ 宽度：25%； }/*4列*/ tbdlist ul，donelist，ul{ 宽度：760px； 边缘底部：20px； 溢出：隐藏； } 李先生，李先生{ 线高：1.5em； 浮动：左； 显示：内联； } /* { 边框颜色：红色； } */ 钮扣{ 背景：3498db； 背景图片：-webkit线性渐变顶部，3498db，2980b9； 背景图像：-moz线性渐变顶部，3498db，2980b9； 背景图像：-ms线性梯度顶部，3498db，2980b9； 背景图像：-o-linear-gradienttop，3498db，2980b9； 背景图像：线性渐变至底部，3498db，2980b9； -webkit边界半径：28； -莫兹边界半径：28； 边界半径：28px； 字体系列：Arial； 颜色：ffffff； 字体大小：12px； 填充：10px 20px 10px 20px； 文字装饰：无； } 购物清单应用程序 购物清单应用程序 项目 加上 日期 打开 发件人：用户名 日期：今天 档案文件 项目 多内比 日期 Reget

---

您可能遇到的一个问题是，通过使用同一个jQuery对象，将其传递到append将从其在DOM中的当前位置删除它，而不是添加新元素。对于一个页面上出现多次的元素，您也在使用id，而这些元素实际上应该使用类

基本上，您的单击处理程序每次都应该为元素重新查询DOM，而不是简单地引用相同的jQuery对象。

尝试更改

$(selector).click(function() {

});

到

$(document).on('event', 'selector', function () {

});