Question

我正在尝试使用Javascript和jQuery构建便利贴。我遇到的问题是，无法在新添加的元素上调用函数draggable()和deleteNote()。我该如何解决这个问题？

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

我在jsfiddle的代码：http://jsfiddle.net/wowpatrick/qexRS/4/

Answer 1

您可以在创建新元素后将.click处理程序添加到新元素中。

Answer 2

您不应该使用相同的ID创建多个元素，而是使用类。

此外，您可以立即将.draggable()附加到已创建的元素，而不是定位$('#newbox')。

这是一个效果更好的分叉：http://jsfiddle.net/YvtLb/

关键在于：

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);

Answer 3

您需要实时附加事件处理程序，因为您最初调用它们时不存在任何元素。

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

也不要使用ID，因为这会产生无效的标记，因为ID必须是唯一的。改为使用类。

Answer 4

这是因为页面加载#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();

Example fiddle

使用JavaScript和jQuery创建便签

4 个答案: