title: d3 click event do not working after clone element append for drag event
body: <p>use &quot;d3&quot;: &quot;^3.5.17&quot; in angular</p>
  <pre class="lang-js prettyprint-override"><code>    const dragEvent = {
        dragstarted: function(d) {
          console.log(`drag start`);
          d3.event.sourceEvent.stopPropagation();
          const node = d3.select(this.parentNode).node();
          const clonedG = node.cloneNode(true);
          d3.select(clonedG).attr('id', 'dragging').classed('dragging', true).attr('opacity', 0.7);
  
          // problem
          node.parentNode.append(clonedG);
        },
        dragged: function(d) {
          console.log(`drag`);
          d3.select('#dragging').attr('transform', `translate(${(d.x = d3.event.x)},${(d.y = d3.event.y)})`);
        },
        dragended: (d) =&gt; {
          // todo: drop call
          console.log(`dragended`);
          const dragging = document.getElementById('dragging');
          dragging.parentNode.removeChild(dragging);
        }
      };
  
      const drag = d3.behavior.drag()
        .origin(function(d) {
          d = {x: 0, y: 0};
          return d;
        })
        .on('dragstart', dragEvent.dragstarted)
        .on('drag', dragEvent.dragged)
        .on('dragend', dragEvent.dragended);
  
      d3.selectAll('.select-rect')
        .datum({x: 0, y: 0})
        .call(drag)
        .on('click', function () {
          console.log(`click`);
          if (d3.event.defaultPrevented) { return; }
          console.log(`clicked`);
        });
  
  </code></pre>
  <p>I am sorry first.<br />
  my English is bad.</p>
  <p>I want to drag a new element and delete it when the drag ends.<br />
  But I have some problem with this line:
  <code>node.parentNode.append(clonedG);</code><br />
  The click event is not working after appending the cloned element.</p>
  <p>Am I wrong?<br />
  Or the click event handle again after drag end event?<br />
  Can anyone help me?</p>