jQuery .hover() not triggering correctly on dynamically created list items
I've been researching this but I just started working with I'm having trouble with the `.hover()` event in jQuery not working as expected on list items that are generated dynamically. I have a simple unordered list that gets populated with items based on user input. When I try to add a hover effect, it only works on the initial items and not on those added later. Here's the code I'm using: ```javascript let itemList = $('#itemList'); $('#addItem').on('click', function() { let newItem = $('<li>New Item</li>'); itemList.append(newItem); }); itemList.children('li').hover(function() { $(this).css('background-color', 'yellow'); }, function() { $(this).css('background-color', ''); }); ``` I tried moving the `.hover()` binding inside the click event, but that just leads to multiple bindings which causes issues. I also considered using event delegation with `.on()` but that doesn’t seem to work with `.hover()` directly. Here’s what I tried: ```javascript itemList.on('mouseenter', 'li', function() { $(this).css('background-color', 'yellow'); }).on('mouseleave', 'li', function() { $(this).css('background-color', ''); }); ``` Despite doing that, the hover effects don’t apply when I add new items. The markup looks like this: ```html <ul id="itemList"></ul> <button id="addItem">Add Item</button> ``` I'm using jQuery 3.6.0. Is there something I'm missing, or is there a better way to handle hover effects for dynamically created elements? Any help would be appreciated! For context: I'm using Javascript on Linux. Thanks in advance! I've been using Javascript for about a year now. Hoping someone can shed some light on this.