jQuery hasData() Utility

Beginner

5 min read

Updated: Oct 2026

4 examples

Live preview

Definition

What Is `hasData()`?

jQuery.hasData(element) returns true if that DOM element already has jQuery internal data (since jQuery 1.5). Unlike jQuery.data(element), it never creates an empty cache — it only checks.

Remember

var el = document.getElementById("box"); // or $("#box")[0]

jQuery.hasData(el)          // false on a pristine element
$.data(el, "score", 10)
jQuery.hasData(el)          // true
$.removeData(el, "score")
jQuery.hasData(el)          // false

// Events also create data:
$(el).on("click", fn)
jQuery.hasData(el)          // true

Need	Use
Check cache exists (no side effects)	`jQuery.hasData(el)`
Read / write values	`.data()` / `jQuery.data()`
Clear values	`.removeData()` / `jQuery.removeData()`

Approach

How to Use `hasData()`

Get a raw DOM node, call the static utility, branch on the boolean.

Obtain a native element (document.getElementById or $el[0]).
Call jQuery.hasData(element) (or $.hasData(element)).
Use the true / false result in an if or log.
Do not pass a jQuery object — unwrap with [0] first.

Piece	Required?	Role
`element`	Yes	Native DOM node to inspect
Return	—	`Boolean` (not a jQuery object)
Side effects	—	None — never creates a cache

Pseudocode

function hasData(element):
    if element has a jQuery data cache:
        return true
    return false
    // does NOT create a cache

// Contrast:
function data(element):
    if no cache yet:
        create empty cache   // side effect!
    return cache

// Official idea:
hasData(p) → false
data(p, "testing", 123)
hasData(p) → true
removeData(p, "testing")
hasData(p) → false
on(click) → hasData true; off(click) → false

Reference

Cheat Sheet

Keep these facts handy while checking the data cache.

Topic	Detail
Syntax	`jQuery.hasData(element)`
Since	jQuery 1.5
Return	`true` \| `false`
Argument	Native Element — not a jQuery object
vs `jQuery.data(el)`	`data` may create cache; `hasData` never does
Events	`.on()` → true until `.off()`
`data-*` alone	No cache until read with `.data()`

Try it

Live Preview

Run steps from the official demo against a sample paragraph and watch hasData flip.

Browser demo of jQuery.hasData() — same idea as the examples below.

Result

jQuery.hasData(p)
→ false

Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Official Demo Sequence

Set data, remove it, bind a click, then unbind — print hasData each time.

jQuery

var $p = $("p"), p = $p[0];

console.log(jQuery.hasData(p));           // false
$.data(p, "testing", 123);
console.log(jQuery.hasData(p));           // true
$.removeData(p, "testing");
console.log(jQuery.hasData(p));           // false
$p.on("click", function () {});
console.log(jQuery.hasData(p));           // true
$p.off("click");
console.log(jQuery.hasData(p));           // false

Try It Yourself

How It Works

Start clean. No cache → false.
Store a value. $.data creates cache → true.
Remove the key. Cache gone → false.
Events. .on stores handlers → true; .off clears them → false.

Example 2 — `hasData` vs `jQuery.data()`

Checking with hasData stays safe; calling jQuery.data(el) can create an empty cache.

jQuery

var el = document.getElementById("box");

console.log(jQuery.hasData(el)); // false — still pristine
jQuery.data(el);                 // returns {}, may create cache
console.log(jQuery.hasData(el)); // true  — empty cache now exists

Try It Yourself

How It Works

Safe check. hasData reads only → still false.
Touch with data. jQuery.data(el) with no key returns (and may create) an object.
Afterward. hasData is now true even with no named values.
Rule. Prefer hasData when you only need yes/no.

Example 3 — Bound Events Count as Data

Handlers live in the data API, so binding flips hasData to true.

jQuery

var $btn = $("#go"), el = $btn[0];

console.log(jQuery.hasData(el)); // false
$btn.on("click", function () { console.log("clicked"); });
console.log(jQuery.hasData(el)); // true
$btn.off("click");
console.log(jQuery.hasData(el)); // false

Try It Yourself

How It Works

Before binding. No handlers → false.
After .on. jQuery stores the handler → true.
After .off. Handlers removed → false again.
Tip. Do not treat hasData as “only my custom keys.”

Example 4 — Plugin Init Guard

Initialize once: skip setup if the element already has jQuery data.

jQuery

function initWidget(el) {
  if (jQuery.hasData(el)) {
    console.log("already initialized");
    return;
  }
  $.data(el, "widget", { ready: true });
  console.log("initialized");
}

var node = document.getElementById("card");
initWidget(node); // initialized
initWidget(node); // already initialized

Try It Yourself

How It Works

First call. hasData is false → store widget state.
Second call. Cache exists → bail early.
Why hasData. Checking does not create a fake “initialized” cache.
Cleanup. Pair with removeData when tearing down.

Edge Cases & Pitfalls

Check these before relying on hasData in conditions.

type

Needs a DOM element

Pass $el[0] or getElementById, not the jQuery collection itself.

events

Events look like “data”

true does not always mean you set a custom key — handlers count too.

attrs

`data-*` alone is not enough

Attributes are cached only after .data() / jQuery.data() reads them.

touch

Avoid probing with `jQuery.data(el)`

That call can create an empty object. Use hasData for existence checks.

Compatibility

Browser Support

jQuery.hasData() is a core utility (since 1.5). It needs a browser DOM with jQuery loaded.

✓ jQuery 1.5+ · Browsers only

jQuery.hasData()

Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.

100% Browser support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

jQuery.hasData() Browsers

Bottom line: Use jQuery.hasData(element) in the browser for a side-effect-free cache check. Remember: events also set data.

Analysis

Performance Notes

Approach	Cost	Best for
`jQuery.hasData(el)`	Very low	Existence checks, init guards
`jQuery.data(el)`	Low (+ possible create)	Reading the full data object
`$el.data(key)`	Low	Named get/set on a collection

Prefer hasData when you only need a boolean. Avoid calling jQuery.data(el) just to “see if data exists” — that can create an empty cache you did not want.

Remember

Key Takeaways

Role: boolean check for jQuery’s internal data cache.
Safe: never creates a cache (unlike jQuery.data(el)).
Argument: native Element only — unwrap with [0].
Events count: .on → true until .off.

One line: ask jQuery.hasData(el) for a side-effect-free yes/no on the data cache — including event handlers.

Frequently Asked Questions

What does jQuery.hasData() do?

jQuery.hasData(element) returns true when that DOM element has any jQuery internal data — values from jQuery.data() / .data(), or bookkeeping from bound events. It returns false when no cache exists. Available since jQuery 1.5.

How is hasData different from jQuery.data()?

hasData only checks and never creates a cache. jQuery.data(element) always returns a data object and may create an empty one on first access. Use hasData for a side-effect-free existence check.

Do event handlers count as data?

Yes. Binding with .on() (or older .bind() / .delegate()) stores handlers in the data API, so hasData becomes true until you .off() them or remove the element.

Can I pass a jQuery object to hasData?

No. Pass a native DOM element — for example document.getElementById('box') or $('#box')[0]. .data() works on jQuery collections; hasData is the static low-level checker.

When should I use jQuery.hasData()?

Use it before touching jQuery.data() when you only need to know whether a cache already exists — plugin init guards, cleanup audits, and avoiding empty cache creation on pristine elements.

Does hasData read HTML data-* attributes?

Not directly. A data-* attribute alone does not create cache until .data() or jQuery.data() reads it. After caching (or after binding events), hasData returns true until the cache is cleared.

Next: data()

Learn how to store and read values on DOM elements with jQuery.

data() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery replaceWith() Method jQuery data() Method

jQuery hasData() Utility

What Is hasData()?

How to Use hasData()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Official Demo Sequence

How It Works

Example 2 — hasData vs jQuery.data()

How It Works

Example 3 — Bound Events Count as Data

How It Works

Example 4 — Plugin Init Guard

How It Works

Edge Cases & Pitfalls

Needs a DOM element

Events look like “data”

data-* alone is not enough

Avoid probing with jQuery.data(el)

Browser Support

jQuery.hasData()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

data()

removeData()

DOM methods hub

on()

off()

dataset

Next: data()

About the author

What Is `hasData()`?

How to Use `hasData()`

Example 2 — `hasData` vs `jQuery.data()`

`data-*` alone is not enough

Avoid probing with `jQuery.data(el)`