jQuery .hover() not firing after dynamically adding elements to the DOM
I've spent hours debugging this and I'm experiencing an scenario where the `.hover()` event is not firing for elements that I add dynamically to the DOM after the page loads... I'm using jQuery version 3.6.0 and I have the following code where I initially set up the hover event on elements with the class `.dynamic-item`: ```javascript $('.dynamic-item').hover( function() { $(this).css('background-color', 'yellow'); }, function() { $(this).css('background-color', ''); } ); ``` After that, I dynamically append new elements to the DOM like this: ```javascript $('#add-item-btn').click(function() { $('#item-container').append('<div class="dynamic-item">New Item</div>'); }); ``` However, when I add new items, they don't trigger the hover event. I've tried using `.on()` like this, but it still doesn’t work: ```javascript $(document).on('hover', '.dynamic-item', function() { $(this).css('background-color', 'yellow'); }); ``` That results in a jQuery behavior: `Uncaught TypeError: want to read properties of undefined (reading 'hover')`. It seems like I'm missing something because the `.hover()` method want to be attached to the dynamically added elements in this way. How can I resolve this scenario? Is there a better approach to handle hover events for these dynamically created elements? Am I missing something obvious? Could someone point me to the right documentation?