在克隆元素中显示上下文菜单

Question

我创建了一个contextmenu来显示特定类，但是当我克隆具有该类的元素时，不会contextmenu显示。显示上下文菜单：// Trigger action when the contexmenu is about to be shown$(".ui-editable").bind("contextmenu", function (event) {  // Avoid the real one  event.preventDefault();  //Save the selected and the parent element   selected_area = $(this);  parent_area = $(this).parent();      $(this).addClass('selected-menu')// Show contextmenu  $("#editContextMenu").finish().toggle(100).  // In the right position (the mouse)  css({    top: event.pageY + "px",    left: event.pageX + "px"  });});克隆元素：function cloneBlock() {  $(selected_area).clone().appendTo(parent_area);}完整的示例在这里： https ://jsfiddle.net/marana12/xsd2n9uo/9/

Answer 1

jQuery.clone()有一个额外的参数

withDataAndEvents（默认值：false）
类型：Boolean
一个布尔值，指示是否应将事件处理程序与元素一起复制。

因此您可以将代码更新为：

$(selected_area).clone(true).appendTo(parent_area);

更新的小提琴：https ://jsfiddle.net/95rLne7m/

---

另一种方法是使用事件委托，因此何时/如何创建 HTML 并不重要，只需更改：

$(".ui-editable").bind("contextmenu", function...

到

$(document).on("contextmenu", ".ui-editable", function...

更新的小提琴：https://jsfiddle.net/95rLne7m/1/