HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>widget namespace demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 32rem; }
    #widget { padding: 20px; background: #f1f5f9; border-radius: 8px; margin-bottom: 12px; }
    button { margin-right: 8px; padding: 8px 14px; cursor: pointer; }
    #status { margin-top: 12px; font-size: 14px; color: #334155; }
  </style>
</head>
<body>
  <div id="widget">Widget element</div>
  <button type="button" id="refresh">Refresh</button>
  <button type="button" id="destroy">Destroy</button>
  <div id="status">Click Refresh or Destroy.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#widget").on("widget.refresh widget.destroy", function (event) {
      $("#status").text(
        "widget." + event.namespace + " fired (type: " + event.type + ")"
      );
    });
    $("#refresh").on("click", function () { $("#widget").trigger("widget.refresh"); });
    $("#destroy").on("click", function () { $("#widget").trigger("widget.destroy"); });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery event.namespace — widget lifecycle (Try It)