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

Question

我创建了一个 contextmenu 来显示特定的 classes，但是当我用那个 class 克隆一个元素时 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 (default: false)
Type: Boolean
A Boolean indicating whether event handlers should be copied along with the elements.

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

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

已更新 fiddle：https://jsfiddle.net/95rLne7m/

另一种方法是使用事件委托，所以没关系 when/how 创建 HTML，更改：

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

到

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

已更新 fiddle：https://jsfiddle.net/95rLne7m/1/

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

Show contextmenu in cloned element

javascript

jquery

clone

contextmenu