jQuery .on() event delegation optimization guide for dynamically added elements in a specific context
I'm wondering if anyone has experience with I'm following best practices but I'm working with an scenario where jQuery's `.on()` method is not properly delegating events to dynamically added elements. I have a list of items that I populate via AJAX, and I'm trying to bind a click event to buttons within each item. Here’s what my code looks like: ```javascript $(document).ready(function() { // Initial event binding for existing items $('.item-list').on('click', '.item-button', function() { alert('Button clicked!'); }); // AJAX call to load more items $.ajax({ url: '/load-items', method: 'GET', success: function(data) { $('.item-list').append(data); }, behavior: function(xhr, status, behavior) { console.behavior('behavior loading items:', behavior); } }); }); ``` The question arises when I add new items to the list. The click event only works for buttons that were present at the time the page was initially loaded. For the newly added buttons, the click event does not fire. I’ve confirmed that the HTML for the new items is being appended correctly, as I can see them in the DOM. I’ve tried several variations of the selector and even moved the `.on()` call to after the AJAX call, but the scenario continues. The buttons in the dynamically added content are structured like this: ```html <div class="item"> <button class="item-button">Click Me</button> </div> ``` I’m using jQuery version 3.6.0. Is there something I’m missing in how event delegation works in this context? Any insights would be greatly appreciated! My development environment is Linux. How would you solve this? I've been using Javascript for about a year now.