jQuery .html() replacement causing unexpected behavior with event handlers on existing elements
I've looked through the documentation and I'm still confused about I'm facing an issue where I'm using jQuery's `.html()` method to replace the content of a specific element, but it's causing the event handlers attached to the child elements to stop working. For example, I have the following basic setup: ```html <div id='container'> <button class='btn'>Click Me</button> </div> ``` ```javascript $(document).ready(function() { $('.btn').on('click', function() { alert('Button clicked!'); }); // Some condition to replace content if (true) { $('#container').html('<button class="btn">New Button</button>'); } }); ``` After replacing the inner HTML of `#container`, clicking the new button does nothing, and I don't see any alerts. I expected the click event handler to work for the newly created button, but it seems to have been lost. I understand that using `.html()` removes all existing child elements and their associated events. I've tried the following approaches to resolve the issue: 1. Using `.on()` with event delegation: ```javascript $('#container').on('click', '.btn', function() { alert('Button clicked!'); }); ``` But this still didn't work as expected after the replacement. 2. I also explored `.append()` or `.replaceWith()`, but those methods still didn't maintain the event handlers from the original button. What is the best practice to ensure that event handlers are preserved or managed properly when replacing HTML content dynamically? Is there a way to handle this without having to re-attach event handlers manually every time I update the content? I'm working with Javascript in a Docker container on macOS.