HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>live custom event</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    p { color: #dc2626; font-weight: 600; }
    span { color: #2563eb; margin-left: 8px; }
    button { padding: 8px 16px; cursor: pointer; margin-top: 8px; }
    #out { margin-top: 12px; color: #4338ca; font-weight: bold; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button type="button" id="trigger">Trigger custom event</button>
  <span id="status"></span>
  <div id="out">Click the button to fire myCustomEvent on the paragraph.</div>
  <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script>
    $("p").live("myCustomEvent", function(e, myName, myValue) {
      $(this).text("Hi there!");
      $("#status")
        .stop()
        .css("opacity", 1)
        .text("myName = " + myName)
        .fadeIn(30)
        .fadeOut(1000);
      $("#out").text("Custom event fired — paragraph updated.");
    });
    $("#trigger").on("click", function() {
      $("p").trigger("myCustomEvent", ["John", "Doe"]);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .live() — custom events (Try It)