Advanced jQuery Interview Questions
Event delegation attaches one handler to a parent and handles matching child events. It works well with dynamic elements.
In this page:
Event Delegation
Event delegation binds one handler to a parent element and relies on event bubbling to catch events from its descendants, including elements added to the page after the handler was first set up. This is a standard advanced-interview topic because it explains both a performance optimization and a solution to the 'new elements need listeners too' problem in one concept.
Example: Event Delegation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<ul id="list"><li>Item 1</li></ul>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
$("#list").on("click", "li", function() {
$("#output").append($("<div>").text("Delegated click: " + $(this).text()));
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Deferred and Promises
jQuery's Deferred object provides a structured way to work with asynchronous operations, exposing done(), fail(), and always() to handle success, failure, and both-outcomes cleanup respectively. Understanding Deferred (and how $.when() combines multiple of them) is often used to gauge how comfortable a candidate is with asynchronous JavaScript generally.
Example: Deferred and Promises
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
const dfd = $.Deferred();
dfd.done(function() { $("#output").append($("<div>").text("Success")); }).fail(function() { $("#output").append($("<div>").text("Failure")); }).always(function() { $("#output").append($("<div>").text("Cleanup")); });
dfd.resolve();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Performance and Caching
Advanced jQuery code should avoid repeated selector calls and unnecessary DOM changes by caching selections in variables and batching multiple updates together instead of applying them one at a time. These habits directly reduce reflow and repaint work, which becomes noticeable on pages with heavier DOM manipulation.
Example: Performance and Caching
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
const $btn = $("#btn");
$btn.on("click", function() {
$btn.css("color", "red");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Security and XSS
Untrusted input — from users or external systems — should always be treated as plain text rather than inserted as raw HTML. Avoid using html() with user-controlled strings unless that content has been explicitly and reliably sanitized first, since doing otherwise is a direct path to an XSS vulnerability.
Example: Security and XSS
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
const userInput = "<img src=x onerror=alert(1)>";
$("#output").text(userInput);
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Advanced AJAX Patterns
Advanced AJAX code should explicitly handle loading states, network and HTTP errors, and the shape of returned data, rather than assuming every request will succeed and return exactly the expected format. Handling these cases deliberately is what separates production-quality AJAX code from a quick prototype.
Example: Advanced AJAX Patterns
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="status"></div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$("#status").text("Loading...");
$.get("data.php").done(function(data) {
$("#status").text(data.message);
}).fail(function() {
$("#status").text("Error loading data");
});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Explaining event delegation without saying it depends on event bubbling, or forgetting that
stopPropagation()on a child prevents it. - Saying
.then()and.done()are identical, when.then()can transform values and chain, while.done()only registers a callback. - Caching a selector but not updating the cache after the DOM changes, so the stored jQuery object refers to stale elements.
Chapter Summary
- Native DOM and vanilla JS alternatives can replace many jQuery selectors and DOM methods.
- jQuery AJAX and the Fetch API achieve similar goals in different ways.
- Knowing when to use jQuery in modern web work, and basic and advanced interview questions, prepare you for real situations.
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: