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

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/