javascript - Event binding on dynamically created elements? -

i have bit of code looping through select boxes on page , binding .hover event them bit of twiddling width on mouse on/off.

this happens on page ready , works fine.

the problem have select boxes add via ajax or dom after initial loop won't have event bound.

i have found plugin (jquery live query plugin), before add 5k pages plugin, want see if knows way this, either jquery directly or option.

as of jquery 1.7 should use jquery.fn.on:

$(staticancestors).on(eventname, dynamicchild, function() {}); 

---

prior this, recommended approach use live():

$(selector).live( eventname, function(){} ); 

however, live() deprecated in 1.7 in favour of on(), , removed in 1.9. live() signature:

$(selector).live( eventname, function(){} ); 

... can replaced following on() signature:

$(document).on( eventname, selector, function(){} ); 

---

for example, if page dynamically creating elements class name dosomething bind event parent exists, document.

$(document).on('mouseover mouseout', '.dosomething', function(){     // want happen when mouseover , mouseout      // occurs on elements match '.dosomething' }); 

any parent exists @ time event bound fine. example

$('.buttons').on('click', 'button', function(){     // here }); 

would apply

<div class="buttons">     <!-- <button>s generated dynamically , added here --> </div>