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 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

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

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

Here .parentItem refers to any parent of .bubbleItemOff.