HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone deep events</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 520px; }
    .widget { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 8px; padding: 12px; margin: 10px 0; }
    .ping { margin-top: 8px; padding: 8px 12px; background: #4f46e5; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
    #dup { margin-top: 8px; padding: 10px 16px; background: #0f766e; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
    #log { margin-top: 12px; font-size: 14px; color: #334155; white-space: pre-wrap; }
  </style>
</head>
<body>
  <div id="widget" class="widget">
    <strong>Original widget</strong>
    <div>
      <button type="button" class="ping">Ping</button>
    </div>
  </div>
  <div id="stage"></div>
  <button type="button" id="dup">Clone(true, true) into stage</button>
  <div id="log">Click Ping on the original, then duplicate and try Ping on the copy.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function log(msg) {
      $("#log").text(msg);
    }
    $("#widget .ping").on("click", function () {
      log("Ping from: " + ($(this).closest(".widget").attr("id") || "unnamed"));
    });
    $("#dup").on("click", function () {
      $("#stage").empty();
      var $dup = $("#widget").clone(true, true);
      $dup.attr("id", "widget-copy");
      $dup.find("strong").text("Cloned widget");
      $dup.appendTo("#stage");
      log("Duplicated with .clone(true, true). Nested Ping still works; id rewritten.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .clone() — deepWithDataAndEvents (Try It)