Question

How can you handle a click event on a dynamically created element in jQuery?

I'm working with dynamically created elements in jQuery and need to handle click events on them. Since these elements don't exist when the page loads, how can I attach a click event to them? What’s the best way to handle click events on elements that are added to the DOM after the page has loaded? Any advice or code examples would be greatly appreciated!

Answer 1

To handle a click event on a dynamically created element in jQuery, you should use the .on() method with event delegation. This approach allows you to attach an event listener to a parent element that exists when the page loads and delegate the event handling to a specified child element, even if it is added later.

Here’s the syntax:

$(parentSelector).on("click", childSelector, function() {

    // Event handler code

});