Event Delegation

Question 8 The following code exists on the page: $(".user").bind("mouseenter", fnShowUserHover); Refactor this to use delegated event handling, so that the event will be triggered on new elements added to the page after initial page load.

by aaccioly

HTML

<div class="user">User</div>
<div class="user">User</div>
<div class="user">User</div>
<div class="user">User</div>
<div class="user">User</div>
<div>Not User</div>

JavaScript

function fnShowUserHover() {
    console.log("Works!");
}
$(document).on("mouseenter", ".user", fnShowUserHover);
$("body").append("<div class=\"user\">User</div>");