HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click vs on click</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    .box { padding: 10px 16px; margin: 8px 8px 8px 0; display: inline-block; cursor: pointer; border-radius: 6px; color: #fff; }
    #legacy { background: #f59e0b; }
    #modern { background: #6366f1; }
    #out { margin-top: 12px; line-height: 1.6; color: #4338ca; font-weight: bold; }
  </style>
</head>
<body>
  <div class="box" id="legacy">.click(fn)</div>
  <div class="box" id="modern">.on("click", fn)</div>
  <div id="out">Both bind the same click event — .on() supports delegation and is not deprecated.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#legacy").click(function() {
      $("#out").text("Legacy: .click(function(){ ... }) — deprecated since jQuery 3.3.");
    });
    $("#modern").on("click", function() {
      $("#out").text("Modern: .on('click', function(){ ... }) — use this for new code.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .click() vs .on('click') migration (Try It)