Add jquery listener to dynamically created element

Question

I need to add a jquery listener to some dynamically created elements. I cannot for the life of me to get this to work. tag_options is not dynamic, its children are. I have tried three ways:

http://jsfiddle.net/nfe2f/

<div id = "tag_options">
    <div class = "tag_option">hover me</div>
</div>

The js:

// never works
$('#tag_options').delegate('.tag_option', 'hover', function(event){
 alert();
});


// never works
$("#tag_options").on("hover", "[class='tag_option']", function(event) {   
    alert();
});


// works if not dynamically created
$('#tag_options .tag_option').hover( function(){
    alert();
 });

News to me too: developer.mozilla.org/en/docs/Underscores_in_class_and_ID_Names — nullability
– nullability, Commented Aug 7, 2013 at 14:29
That seems to be something published 12 years ago which is probably irrelevant now. — rink.attendant.6
– rink.attendant.6, Commented Aug 7, 2013 at 14:31
@Ian Fair enough, hard habit to shake though, plus it will not hurt my code :D — Jake Aitchison
– Jake Aitchison, Commented Aug 7, 2013 at 14:44

Bill Criswell · Accepted Answer · 2013-08-07 15:51:39Z

2

There is no hover event anymore and delegate is being phased out in favor of on. You'd want to use mouseenter and mouseleave. I believe you're shooting for this:

$('#tag_options')
  .on('mouseenter', '.tag_option', function(e){
    /* Wax On */
  })
  .on('mouseleave', '.tag_option', function(e){
    /* Wax Off */
  });

If you wish to keep it in one on you can do what palaѕн suggests. I just wanted to make it a little easier to follow:

$('#tag_options').on('mouseenter mouseleave', '.tag_option', function(event){
  if ( event.type === 'mouseenter' ) {
    /* Wax On */
  } else {
    /* Wax Off */
  }
});

edited Aug 7, 2013 at 15:51

answered Aug 7, 2013 at 14:23

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

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

1 Comment

user984003 Over a year ago

Awesome, that did it. Tricky that .hover() works in some cases.

palaѕн · Accepted Answer · 2013-08-07 14:26:58Z

2

This happens since there is no .on("hover" event. You can use mouseenter or mouseleave like:

$(function () {

    // Attach Event
    // new way (jQuery 1.7+) - on(events, selector, handler);
    $('#tag_options').on('mouseenter mouseleave', '.tag_option', function (e) {
        alert(e.type);
    });

    // Create elements dynamically
    $('#tag_options').append('<div class="tag_option">hover me</div>');
});

FIDDLE

answered Aug 7, 2013 at 14:26

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

A. Wolff · Accepted Answer · 2013-08-07 14:42:57Z

0

Other syntax possible, more readable IMO:

$('#tag_options').on({
    mouseenter:function(){/**/},
    mouseleave:function(){/**/}
},'.tag_option');

answered Aug 7, 2013 at 14:42

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Jake Aitchison · Accepted Answer · 2013-08-07 14:45:45Z

0

example to go with first answer:

$('#tag_options').on('mouseenter mouseleave','.tag_option', function(event){
    if(event.type == 'mouseenter'){
        alert('entering');
    }
    if(event.type == 'mouseleave'){
        alert('leaving');
    }
});

edited Aug 7, 2013 at 14:45

answered Aug 7, 2013 at 14:28

Jake Aitchison

1,1096 silver badges20 bronze badges

3 Comments

Jeff Noel Over a year ago

If you want to post an example related to an already existing answer, do it as a comment or link to a JSFiddle.

Jake Aitchison Over a year ago

@JeffNoel appologies.

Bill Criswell Over a year ago

Quick heads up: You forgot the .type on event.

rink.attendant.6 · Accepted Answer · 2013-08-07 14:29:02Z

-1

There is a mouseover event that you can listen for:

$('#tag_options').on("mouseover", ".tag_option", function(event) {   
    alert('hello world!');
});

jsFiddle

answered Aug 7, 2013 at 14:29

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

1 Comment

nullability Over a year ago

I wouldn't recommend using mouseover as it will fire for child elements as well, see the demo at the bottom of api.jquery.com/mouseover

Collectives™ on Stack Overflow

Add jquery listener to dynamically created element

5 Answers 5

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related