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

jquery

Solution

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`

Problem

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 the document ready event is fired. Is there any way to automatically add the event handler to the newly created elements, or do I have to explicitly do it after the element is created? ``` $(function() { $('.bubbleItemOff').mouseenter(function(e) { //... }); }); ```

Original source