Delegate Heavy Lists
Delegate Heavy Lists: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.
On this page
jQuery Tutorial · Lesson 62 of 100
Delegate Heavy Lists
Setup & DOM ✓ → Events Effects AJAX ✓ → Perf & Integrate → Ship & Projects
Perf & Integrate · 3 — Harden · ~10 min · Performance and Security
What is this?
For hundreds of rows, one delegated listener on tbody beats hundreds of direct binds. Less memory, works for rows added later, simpler teardown.
Why should you care?
QueryVerse settlement grids grow all day — delegation is the default binding strategy.
See it live — copy this example
Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QueryVerse</title>
<style>
body { font-family: system-ui, sans-serif; margin: 1.25rem; }
.box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
.muted { color: #666; }
button { margin-right: .35rem; margin-top: .35rem; }
input, select, textarea { margin: .25rem 0; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
.hidden { display: none; }
.row-odd { background: #f7f7f7; }
.active { font-weight: 700; }
.toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
</style>
</head>
<body>
<button type="button" id="seed">Seed 100 rows</button>
<table><tbody id="tb"></tbody></table>
<p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('#tb').on('click', 'button.sel', function () {
$('#out').text('Selected ' + $(this).closest('tr').data('id'));
});
$('#seed').on('click', function () {
var i, html = '';
for (i = 0; i < 100; i += 1) {
html += '<tr data-id="R' + i + '"><td>Row ' + i + '</td><td><button type="button" class="sel">Select</button></td></tr>';
}
$('#tb').html(html);
$('#out').text('Seeded 100 rows with one delegated listener');
});
});
</script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Bind once outside the seed function.
- Prefer data-* on tr for ids.
- Direct binding in the seed loop would create 100 handlers.
Practice next
- Seed then select several rows.
- Re-seed and confirm selection still works.
- Inspect listener count mentally vs 100 binds.
- Delegate change on inputs in cells.
- off on teardown of the page module.
Remember
One parent listener. Works for new rows. Lower memory than N binds.
Settlement grid
An NSE clearing QueryVerse grid seeds hundreds of rows each evening batch.
Outcome: A single delegated Select handler covers every row.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
