Jquery click function doesn't work after ajax call?

The art of managing dynamically-loaded content

In this brave new world of Ajax additions, event delegation steps in as the golden standard to bind events to dynamic elements. Direct event binding techniques (those good ol' .click() days) are perfect only for static companions in your DOM; for dynamically appearing elements via Ajax, they're like complimenting a cat on its obedience.

Event delegation: An overview

Aim your click event handler at a higher-level DOM element — something sturdy, like document or a concrete parent container, then specify the dynamic element as a selector. When your event bubbles up to the top, jQuery will remember it as a member of the delegation party and fire the handler.

$(document).on('click', '.futureBTN', function() {
  // Your smart button logic goes here
});


Smart parent selection for performance

Using document as a safe bet for all events bubbling? Sure, it works. But if you can, choose a closer static parent for that .on() action. Your event doesn't need to climb the entire DOM tree if it can rest on a lower, sturdy branch.

$('#parents-living-room').on('click', '.teenager-coming-home-late', function() {
  // Domino's Pizza? Again?
});


Timing: You've got to be just right

Ensure you schedule your delegation at the right time - after the static parent has been established, but before the kids from the Ajax pool party arrive. Be prepared to reapply the event bindings if the DOM structure decides to change outfits halfway through the party.

Proactive event propagation

Event propagation or "bubbling" is not a mystical concept. It's a simple logical journey that a click event takes through the DOM tree. When you add an element to the DOM post Ajax call, the event doesn't automatically bubble up to it unless of course, you have a well-placed event listener already waiting on it like a butler at a billionaire's party.

Direct vs. delegated event handlers: Choose wisely

Knowing the difference between direct and delegated event handlers is the difference between feeling at home and wandering lost in the jungle. The direct .click() method is like a faithful dog for static content, but for dynamic elements, it just doesn't care. Here's where .on() morphs into a Swiss army knife handling existing and future elements with finesse.

A pinch of prevention

Your event handler might want to stop the default event behavior from happening, say prevent a hyperlink from its natural inclination to redirect. Here's how:

$(document).on('click', '.hyper-link-wannabe', function(event) {
  event.preventDefault();
  // Relax hyperlink, you're not emigrating.
});
