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

VisioN · Accepted Answer · 2012-05-07 20:45:25Z

6

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

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

Here .parentItem refers to any parent of .bubbleItemOff.

answered May 7, 2012 at 20:45

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabrizio Calderan · Accepted Answer · 2012-05-07 20:58:36Z

4

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

edited May 7, 2012 at 20:58

answered May 7, 2012 at 20:46

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related