HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.data multiple fields</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 28rem; }
    .sync { padding: 10px 16px; background: #0f766e; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
    #log { margin-top: 12px; padding: 12px; background: #ecfdf5; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <button type="button" class="sync">Sync now</button>
  <div id="log">Click Sync — confirm dialog then simulated AJAX log.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(".sync").on("click", {
      url: "/api/sync",
      method: "POST",
      confirm: true
    }, function (event) {
      if (event.data.confirm && !window.confirm("Sync now?")) return;
      $("#log").text("Would " + event.data.method + " " + event.data.url);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery event.data — multiple fields (Try It)