HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>hasData official demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 560px; }

    #target { background: #dbeafe; padding: 10px; border-radius: 6px; margin: 10px 0; }

    span { display: block; margin: 4px 0; color: #1e40af; font-family: monospace; font-size: 14px; }

    button { margin-top: 8px; padding: 10px 16px; background: #6366f1; color: #fff; border: none; border-radius: 6px; cursor: pointer; }

    #hint { color: #64748b; font-size: 14px; margin-top: 10px; }

  </style>

</head>

<body>

  <p id="target">Demo paragraph</p>

  <span id="s1">Step 1: </span>

  <span id="s2">Step 2: </span>

  <span id="s3">Step 3: </span>

  <span id="s4">Step 4: </span>

  <span id="s5">Step 5: </span>

  <button type="button">Run official demo</button>

  <p id="hint">Mirrors the jQuery API hasData demo.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("button").on("click", function() {

      var el = $("#target")[0],

          $el = $(el);

      $el.off("click").removeData();

      $("#s1").text("Step 1 (pristine): " + jQuery.hasData(el));

      jQuery.data(el, "testing", 123);

      $("#s2").text("Step 2 (after data): " + jQuery.hasData(el));

      jQuery.removeData(el, "testing");

      $("#s3").text("Step 3 (after removeData): " + jQuery.hasData(el));

      $el.on("click", function() {});

      $("#s4").text("Step 4 (after .on click): " + jQuery.hasData(el));

      $el.off("click");

      $("#s5").text("Step 5 (after .off click): " + jQuery.hasData(el));

      $("#hint").text("Sequence: false → true → false → true → false");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.hasData() — official demo (Try It)