javascript - Add jquery listener to dynamically created element -

i need add jquery listener dynamically created elements. cannot life of me work. tag_options not dynamic, children are. have tried 3 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();  }); 

there no hover event anymore , delegate being phased out in favor of on. you'd want use mouseenter , mouseleave. believe you're shooting this:

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

if wish keep in 1 on can palaѕн suggests. wanted make little easier follow:

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