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();
 });

first things first `tag_options` is not valid for class names or ID names (they may work strangely in some versions of I.E.) swap the names in your DOM and your javascript with `tag-options` and try again. — Jake Aitchison, Aug 07 '13 at 14:24
I'm not sure if I follow what makes the last example "non-dynamic", or how either of those elements are "dynamically-created". — Katana314, Aug 07 '13 at 14:24
@milkshake [really?](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) — svidgen, Aug 07 '13 at 14:26
News to me too: https://developer.mozilla.org/en/docs/Underscores_in_class_and_ID_Names — nullability, Aug 07 '13 at 14:29
That seems to be something published 12 years ago which is probably irrelevant now. — rink.attendant.6, Aug 07 '13 at 14:31
@billyonecan, ah I stand corrected, technically they are valid but it is still best to avoid them in favour of - or no separator at all as per nullability's link. — Jake Aitchison, Aug 07 '13 at 14:35
@milkshake At some point we have to realize that things are outdated. Your main point has now become browser compatibility. But barely any of the browsers with problems listed in nullability's link are still used much. There's no longer a reason to avoid `_` - they're perfectly valid and should work on any browser people are using nowadays. Leading `-` or `_` in identifiers are meant for vendors, but that's not really related. Also, we shouldn't allow CSS rules determine how our HTML is structured. If we want `id`s or `class`es with `_` in our HTML, we can escape our CSS if we have to — Ian, Aug 07 '13 at 14:41
@Ian Fair enough, hard habit to shake though, plus it will not hurt my code :D — Jake Aitchison, Aug 07 '13 at 14:44
@milkshake Absolutely, definitely not trying to convince *you* to change - everyone has their conventions/methods. I just don't think it's an argument to convince *other people* anymore :) — Ian, Aug 07 '13 at 14:45
A good argument against some conventions is when they go against the standard way in a given language, like underscores in CSS or camel case in python... so for that reason don't use underscores in CSS. — Esailija, Aug 07 '13 at 14:53
@Esailija How can you "not use underscores in CSS" when your HTML contains underscores in its attribute values? — Ian, Aug 07 '13 at 15:28
@Ian err, HTML has dash convention too. That's how. What I am saying, when a convention is in conflict with the standard convention of the given language, then that convention will pretty much negate all benefits of having a convention in the first place. — Esailija, Aug 07 '13 at 15:30
@Esailija I completely understand what you're saying, and basically agree. I guess I just didn't know there was a convention for HTML "naming". I don't know where I picked it up, but I've been using `_` to represent spaces in `id`s, and `-` to represent spaces in `class`es...for some reason, I've wanted to distinguish between the two. I guess I never learned/knew the "right" way. Is there anything specific you know of that explains this for HTML? — Ian, Aug 07 '13 at 15:36
@Ian Actually html seems to have allwordstogether (`formnovalidate`) and mixed dash (`data-`). Dunno where underscore for id comes from :) — Esailija, Aug 07 '13 at 15:39
@Esailija That's what I mean, I think I made it up (not like the first person, but just personally). I didn't know if there was somewhere that explained what you "should" use, like http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml for HTML — Ian, Aug 07 '13 at 15:41
Not relevant to CSS but if you use a mixed bag of 3rd party libraries, and if they didn't follow the language's standard conventions (for stuff that leaks out in API), you would be forced to write like a team of 15 monkeys even if you were writing the project alone lol. — Esailija, Aug 07 '13 at 15:43

Bill Criswell · Accepted Answer · 2013-08-07T15:51:39.567

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

Awesome, that did it. Tricky that .hover() works in some cases. — user984003, Aug 07 '13 at 14:27

score 2 · Answer 2 · answered Aug 07 '13 at 14:26

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

Jake Aitchison · Answer 3 · 2013-08-07T14:45:45.427

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 07 '13 at 14:45

answered Aug 07 '13 at 14:28

Jake Aitchison

1,079
6
20

If you want to post an example related to an already existing answer, do it as a comment or link to a JSFiddle. – Jeff Noel Aug 07 '13 at 14:29
@JeffNoel appologies. – Jake Aitchison Aug 07 '13 at 14:30
Quick heads up: You forgot the `.type` on `event`. – Bill Criswell Aug 07 '13 at 14:43

score 0 · Answer 4 · answered Aug 07 '13 at 14:42

0

Other syntax possible, more readable IMO:

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

answered Aug 07 '13 at 14:42

A. Wolff

74,033
9
94
155

score -1 · Answer 5 · answered Aug 07 '13 at 14:29

-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 07 '13 at 14:29

rink.attendant.6

44,500
61
101
156

1

I wouldn't recommend using `mouseover` as it will fire for child elements as well, see the demo at the bottom of http://api.jquery.com/mouseover/ – nullability Aug 07 '13 at 14:51

Add jquery listener to dynamically created element

5 Answers5