jQuery.hasData() Utility

What You’ll Learn

The static jQuery.hasData() utility checks whether a DOM element already has jQuery internal data — without creating an empty cache entry like jQuery.data() does. This tutorial covers the official jQuery demo sequence, side-effect-free existence checks, plugin init guards, how event handlers affect the result, comparisons with .data() and jQuery.data(), and five practical try-it examples.

Introduction

jQuery stores arbitrary JavaScript values and internal bookkeeping on DOM elements in a private cache. You normally read and write that cache with .data() on a jQuery collection or jQuery.data(element) on a raw node. But what if you only want to know whether data already exists — without accidentally creating an empty cache object?

That is exactly what jQuery.hasData( element ) does. Available since jQuery 1.5, it accepts a native DOM element and returns a Boolean: true when jQuery has associated internal data with that node, false when it has not. The check is read-only; it never initializes the cache.

Event handlers count too. Binding with .on() or .bind() associates internal data, so hasData returns true until you call .off() or remove the element. Browse the jQuery DOM hub, jQuery.data() utility, and .removeData() for the rest of the data API.

Understanding jQuery.hasData()

jQuery.hasData( element ) inspects jQuery’s private expando-backed store on a single DOM node. It returns true when any cached values or internal structures exist — including data set with jQuery.data(), values written via .data(), and the internal records created when event handlers are attached.

By contrast, calling jQuery.data( element ) on a pristine element always returns a data object (possibly empty) and may create cache entries as a side effect. Use hasData when the question is “does this element already have jQuery data?” rather than “give me the data object.”

📝 Syntax

jQuery.hasData() has one form:

Check for internal data — since 1.5

jQuery.hasData( element )

• element — a native DOM element (not a jQuery object).
• Returns — true if internal data exists; otherwise false.
• Does not create or modify the cache.

Official hasData pattern

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

$.hasData( p );              // false

$.data( p, "testing", 123 );
$.hasData( p );              // true

$.removeData( p, "testing" );
$.hasData( p );              // false

$p.on( "click", function() {} );
$.hasData( p );              // true

$p.off( "click" );
$.hasData( p );              // false

Examples Gallery

Example 1 follows the official jQuery API documentation. Examples 2–5 cover side-effect-free checks, plugin init guards, event-handler data, and batch cleanup audits. Use DevTools or the Try-it links to run each snippet in the browser.

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

$.hasData( p );              // false

$.data( p, "testing", 123 );
$.hasData( p );              // true

$.removeData( p, "testing" );
$.hasData( p );              // false

$p.on( "click", function() {} );
$.hasData( p );              // true

$p.off( "click" );
$.hasData( p );              // false

Step 1: hasData → false (pristine element)
Step 2: after $.data("testing", 123) → true
Step 3: after $.removeData("testing") → false
Step 4: after .on("click") → true
Step 5: after .off("click") → false

Both stored values and event bindings affect the result

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

// WRONG for a pure existence check — may create empty cache
// var obj = jQuery.data( el );
// var has = obj && Object.keys( obj ).length > 0;

// RIGHT — read-only Boolean, no side effects
var has = jQuery.hasData( el );   // false on pristine element

if ( !has ) {
  console.log( "Safe to initialize — no jQuery data yet" );
}

Before any jQuery calls: hasData → false
After jQuery.data(el) read (no keys set): hasData → true (cache created!)
After jQuery.hasData(el) on fresh element: stays false

Use hasData when you must not touch the cache

function initTabs( $root ) {
  var el = $root[ 0 ];

  if ( jQuery.hasData( el ) && $root.data( "tabs" ) ) {
    return; // already initialized
  }

  $root.data( "tabs", { active: 0 } );
  $root.on( "click.tabs", ".tab", function() { /* ... */ } );
}

initTabs( $( "#nav" ) );
initTabs( $( "#nav" ) ); // second call is a no-op

First initTabs(): hasData false → plugin runs, sets data + binds events
Second initTabs(): hasData true + data("tabs") exists → skipped
Prevents double-binding and duplicate widget state

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

jQuery.hasData( el );                    // false

$btn.on( "click", function() {
  alert( "Clicked!" );
});
jQuery.hasData( el );                    // true

$btn.off( "click" );
jQuery.hasData( el );                    // false

Before .on("click"): hasData → false
After .on("click"): hasData → true (handler bookkeeping)
After .off("click"): hasData → false

Event bindings alone can make hasData true

function auditSection( selector ) {
  var withData = [];

  $( selector ).each(function() {
    if ( jQuery.hasData( this ) ) {
      withData.push( this.id || this.className || "anonymous" );
    }
  });

  return withData;
}

// Before tearing down #sidebar widgets
var dirty = auditSection( "#sidebar [data-widget]" );
console.log( "Elements with jQuery data:", dirty );

widget-a: hasData true (initialized)
widget-b: hasData false (never touched)
widget-c: hasData true (click handler bound)

auditSection returns ["widget-a", "widget-c"] for targeted cleanup

🚀 Common Use Cases

• Plugin init guards — skip double initialization when data or handlers already exist.
• Side-effect-free checks — test pristine elements without calling jQuery.data().
• Teardown audits — find elements that still hold cache before removing a DOM subtree.
• Debugging — quickly see whether jQuery has touched an element in DevTools-driven scripts.
• Memory hygiene — identify leaked widgets that forgot to call .removeData() or .off().
• Library code — low-level utilities that receive raw DOM nodes from non-jQuery callers.

📝 Notes

• Available since jQuery 1.5; stable across 1.x, 2.x, 3.x, and 4.x.
• Requires a native DOM element — use $("#el")[0] or collection.get(0).
• Never creates cache entries; safe for existence checks on pristine nodes.
• Event handlers from .on() / .bind() make hasData return true.
• HTML data-* attributes alone do not flip the result until .data() reads them.
• Pair with jQuery.removeData() or .removeData() to clear values after auditing.
• .remove() cleans up automatically; detached nodes may still report true until cleared.

💡 Best Practices