How to bind event on dynamically created elements in JavaScript?

To bind events to dynamically created elements in JavaScript, you can’t attach listeners directly to the elements (since they don’t exist when the page loads). Instead, use event delegation by attaching the event to a static parent element that exists in the DOM at runtime. Here’s how to do it:

1. Vanilla JavaScript (Event Delegation)

Use event.target and closest() to identify dynamically added elements:

// Static parent (e.g., document or a container div)
document.addEventListener('click', function(event) {
  // Check if the clicked element matches your dynamic element's selector
  const dynamicElement = event.target.closest('.dynamic-element');
  if (dynamicElement) {
    // Handle the event
    console.log('Dynamic element clicked!', dynamicElement);
  }
});

• Key Points:
• Use closest() to handle nested elements within the dynamic element.
• Replace .dynamic-element with your dynamic element’s selector (e.g., #btn, .item).

2. jQuery (Event Delegation)

Use jQuery’s .on() method with a selector parameter to delegate events:

// Static parent (e.g., document or a container div)
$(document).on('click', '.dynamic-element', function() {
  // Handle the event
  console.log('Dynamic element clicked!', $(this));
});

• Key Points:
• Replace .dynamic-element with your dynamic element’s selector.
• The parent (document or a closer static container) must exist when the event is bound.

Why Event Delegation Works

• Events “bubble up” from the target element to the root of the DOM.
• By attaching the listener to a static parent, you catch events from dynamically added children as they bubble up.

Example Workflow

1. Static Parent: Attach the event listener to a parent that exists on page load (e.g., document, #container).
2. Dynamic Element Check: Use a selector to verify if the event originated from the dynamic element.
3. Handle Event: Run logic when the dynamic element is interacted with.

Best Practices

1. Avoid document for Performance: Attach the event to the closest static parent (e.g., #container) instead of document to improve performance.
2. Use closest() for Nested Elements: Ensure events work even if the dynamic element contains nested HTML.

Use Case

<div id="container">
  <!-- Dynamically added buttons will appear here -->
</div>

<script>
  // Dynamically add a button
  const button = document.createElement('button');
  button.className = 'dynamic-btn';
  button.textContent = 'Click Me';
  document.getElementById('container').appendChild(button);

  // Event delegation for the dynamic button
  document.getElementById('container').addEventListener('click', (event) => {
    if (event.target.closest('.dynamic-btn')) {
      alert('Dynamic button clicked!');
    }
  });
</script>

This approach works for any framework or library (React, Vue, etc.) where elements are added dynamically.