Automatically add an event handler to a newly created element using jQuery

Question

On document ready I attach this event handler to all elements with class bubbleItemOff. My problem is that some of the bubbleItemOff elements are created dynamically after t

Answer 1

You can use jQuery on method in delegated-events approach:

$(".parentItem").on("mouseenter", ".bubbleItemOff", function(e) {
    //
});

Here .parentItem refers to any parent of .bubbleItemOff.

Answer 2

Use event delegation on a common parent element using on() method (assuming you're using jQuery 1.7.x +), e.g.

$(function() {
    $('body').on('mouseenter', '.bubbleItemOff', function(e) 
    {
     ...
    }
}

if you're using an older version use delegate() instead. Change body with the first common parent element of .bubbleItemOff