使用JavaScript和jQuery创建便笺

我正试图用Javascript和jQuery构建一个便笺。我遇到的问题是，不能对新添加的元素调用函数

draggable（）

和

deleteNote（）

。我怎样才能解决这个问题

编辑：ID实际上应该得到一个额外的数字，我不知道如何实现，因为我不知道如何创建计数器。例如，

newbox1

---

我在JSFIDLE上的代码：

您可以添加

。在创建新元素后，单击
处理程序。您不应该创建具有相同ID的多个元素，而是使用类

另外，您可以立即将
.draggable（）
附加到创建的元素，而不是将
$（“#newbox”）作为目标。

这里有一个效果更好的叉子：

关键在于：

var postit = $('<div class="ui-widget-content newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>').draggable();
$('#canvas').append(postit);

var posit=$（'Delete commentYour comment:
）.draggable（）；
$（'画布'）.append（posit）；
这是因为页面加载
#newbox
不存在。更好的方法是将新元素存储在变量中，附加它，然后应用
draggable
，尝试以下操作：

// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();

//在corsor位置创建新注释
var$newbox=$（“删除评论您的评论：
”）；
$（'#canvas'）。追加（$newbox）；
$newbox.draggable（）；

您需要实时附加eventhandlers，因为在您最初调用它们时没有元素存在

使用jQuerys
live（）
（注意：已弃用）或使用新的jQuery版本
on（）
（），以便能够在每个新创建的便笺上附加事件

也不要使用ID，因为这会产生无效的标记，因为ID必须是唯一的。改为使用类。
你能给我一个简短的例子，当添加元素时，如何使用
on（）
来启用函数（例如
deleteNote（）
）吗？@wowpatrick好的一面是，如果使用on，你不需要介意是否添加了新元素，它可以像
live（）
那样附加侦听器。看看jQueryDocu：我明白你的意思，但是在你给出的例子中，
deleteNote（）
函数似乎仍然不起作用……但是
deleteNote（）
函数呢？即使在单击新附加的元素时必须调用它，我如何才能使其工作？您可以将其委托给文档：
$（文档）。在（'click'，'#close'，function（）{//delete
）上，您可以给我一个如何执行此操作的示例吗？