Search code examples
javascriptjquerycontextmenuclone

Show contextmenu in cloned element

I created a contextmenu to show against specific classes, but when I cloned an element with that class the contextmenu is not shown.

Show the 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"
  });

});

Clone the element:

function cloneBlock() {

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

}

The full example is here: https://jsfiddle.net/marana12/xsd2n9uo/9/

Solution

  • jQuery .clone() has an additional argument

    withDataAndEvents (default: false)
    Type: Boolean
    A Boolean indicating whether event handlers should be copied along with the elements.

    So you can update your code to:

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

    Updated fiddle: https://jsfiddle.net/95rLne7m/

    The alternative is to use event delegation, so it doesn't matter when/how the HTML is created, change:

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

    to

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

    Updated fiddle: https://jsfiddle.net/95rLne7m/1/