Javascript 使用编辑按钮Jquery的待办事项列表

我正在尝试用一个编辑按钮创建一个待办事项列表，当单击该按钮时，将使添加的项目可编辑，但我遇到了问题。我已经创建了按钮和所有东西，但是当我点击它时，什么都没有发生。任何建议都将不胜感激

JavaScript

function editItem(){
    var parent = $(this).parent();
    if (!parent.hasClass('edit')) {
        parent.addClass('edit');
    }else if (parent.hasClass('edit')) {    
        var editTask = $(this).prev('input[type="text"]').val();
        var editLabel = parent.find('label');
        editLabel.html(editTask);
        parent.removeClass('edit');
    }

$(function(){
    $(document).on('click', 'edit', editItem)
});

---

看起来您的目标是

，您应该使用

。编辑
：

$(function(){
    $(document).on('click', '.edit', editItem);
});

工作片段


$（函数（）{
函数附加项（）{
//追加到列表中
$（“#待办事项”）.append（“
”+$（“#待办事项”）.val（）+”&bull；
）；
//清除文本
$（“#todo”）.val（“”）；
}
$（“#todo”）.keydown（函数（e）{
//如果按enter键
如果（e.which==13）
addItem（）；
});
//单击“添加”按钮时
$（“#添加”）。单击（添加项）；
//将事件委托给动态生成的元素
//用于编辑按钮
$（文档）。在（“单击”，a[href=“#编辑”]”上，函数（）{
//使跨度可编辑并将其聚焦
$（this）.closest（“li”）.find（“span”）.prop（“contenteditable”，true）.focus（）；
返回false；
});
//用于删除按钮
$（文档）。在（“单击”，a[href=“#删除”]”上，函数（）{
//删除列表项
$（此）.最近的（“li”）.淡出（函数（）{
$（this.remove（）；
});
返回false；
});
});
*{font-family:'Segoe-UI'；边距：0；填充：0；列表样式：无；文本装饰：无；}
输入，li{padding:3px；}
#todo项目小{显示：内联块；左边距：10px；填充：2px；垂直对齐：底部；}
#待办事项项目范围：焦点{背景色：#ccf；}

如果您使用
“编辑”
作为选择器，它将选择
元素。你的文档中有这样的元素吗；您可能想尝试
.edit
类的东西
edit
嗨，我试过了，但似乎不起作用。我创建了一个JSFIDLE，你能检查一下，看看出了什么问题吗？谢谢，伙计们@praveen Kumar感谢您的帮助！我稍后会再看，但可能会有一些问题！我真的很感谢你的帮助！哦，我明白了！这是错误的，但单击“编辑”按钮仍然不会产生任何结果。我添加了一个JSFIDLE，也许这会对您有所帮助？谢谢@Rassiland确定我会尝试检查。@Rassiland我已经更新了你的代码好友。。有很多错误：感谢所有的帮助，我的代码现在看起来好多了！但是，我很难让编辑按钮正确格式化。我希望该按钮在单击enter时更新新文本并退出编辑选项，但现在它会跳转到新行。有什么想法吗？太好了！你真的帮了我的忙。我很感激！