jQuery .live() Method

What Is .live()?

.live(events, handler) attaches a handler for elements matching the current selector — now and in the future — by binding at document (since 1.3). Removed in 1.9 in favor of .on().

// Legacy (jQuery ≤ 1.8)
$("a.offsite").live("click", function () {
  alert("Goodbye!");
});

// Same idea with successors
$(document).delegate("a.offsite", "click", fn); // 1.4.3+
$(document).on("click", "a.offsite", fn);       // 1.7+ (preferred)

How to Use .live()

Only when reading or migrating pre-1.9 code. New work should use .on().

1. Select the elements that should match (the selector becomes the live key).
2. Call .live(events, handler) — jQuery attaches at document.
3. Add matching elements later; they still trigger the handler.
4. Remove with .die() using the same selector (legacy) or rewrite to .off().
5. Prefer a closer root: $(root).on(events, selector, handler).

Pseudocode

$(SELECTOR).live(EVENTS, HANDLER)

≈ attach on document for EVENTS
when event bubbles to document:
    if original target matches SELECTOR:
        run HANDLER with this = matched element

new matching elements:
    work automatically

modern rewrite:
    $(document).on(EVENTS, SELECTOR, HANDLER)

Cheat Sheet

Quick facts for legacy code reviews.

Live Preview

Modern .on() stand-in for .live() — new items stay clickable (works in current jQuery).

Ready — click an item or run an action.

jQuery Examples

Legacy patterns for reading old code. Prefer .on() in new projects. Try It Yourself runs on jQuery 1.8.3.

$("p").live("click", function () {
  $(this).after("
Another paragraph!
");
});

Click any <p> → a new <p> appears after it
New paragraphs also respond to clicks

$("a").live("click", function () {
  $("#out").text("Blocked navigation");
  return false; // preventDefault + stopPropagation
});

// Or cancel default only:
// event.preventDefault();

Blocked navigation
(page does not leave)

// Legacy
$("a.offsite").live("click", fn);

// Intermediate
$(document).delegate("a.offsite", "click", fn);

// Preferred (1.7+)
$(document).on("click", "a.offsite", fn);

All three forms handle the same click
Only .on() works on current jQuery without Migrate

$("button").live("click", { source: "toolbar" }, function (event) {
  $("#out").text($(this).text() + " · " + event.data.source);
});

Save · toolbar

$("p").live({
  click: function () {
    $(this).after("
Another paragraph!
");
  },
  mouseover: function () {
    $("#out").text("over: " + $(this).text());
  }
});

click → appends another paragraph
mouseover → updates the status line

Performance Notes

Delegation is good; document-only delegation is the slowest form. Closer roots with .on() filter fewer unrelated bubbles.

Key Takeaways