Advanced jQuery Interview Questions
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>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").on("click", "li", function() {
console.log("Delegated click:", $(this).text());
});
</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>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.done(function() { console.log("Success"); }).fail(function() { console.log("Failure"); }).always(function() { console.log("Cleanup"); });
dfd.resolve();
</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>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.css("color", "red");
});
</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>
</head>
<body>
<div id="output"></div>
<script>
const userInput = "<img src=x onerror=alert(1)>";
$("#output").text(userInput);
</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>
</head>
<body>
<div id="status"></div>
<script>
$("#status").text("Loading...");
$.get("data.php").done(function(data) {
$("#status").text(data.message);
}).fail(function() {
$("#status").text("Error loading data");
});
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: