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 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) 
       {
          //...
       });
   });

Answer 1

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