javascript - Event binding on dynamically created elements? -

I have a little code, where I'm looping through a selection box on a page and a I'm compulsive. Mouse On / Off

P>

The problem I have is that after the initial loop, any select box I add through Ajax or Dome will not be constrained.

I have found this plugin (), but before I get 5k on my pages with another plugin, I want to see if anyone knows a way to do this, either jQuery With or from any other option

should use jQuery 1.7 :

  $ (staticAncestors) .on (eventName, dynamicChild, function () {});  

---

Before , the recommended approach was to use:

  $ (selector) .live (eventName, Function () {});  

However, live was exempted in 1.7 in favor of , and completely in 1.9 Was removed. Live () Signature:

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

... can be replaced with the following signature:

  $ (document) .on (eventName, selector, function () {}) ; For example, if your page is dynamically creating elements with the class name  dosomething , then you will tie this event to a parent who already exists, often < Code> Document . 
 
  $ (document) .on ('mouseover mouseout', '.dosomething', function () {// what to do when you want to have mouseover and mouseout // elements Match that '.dosomething'});  
 
 Any parent who is present at the time of the incident is fine. For example 
 
  $ ('.button'). ('Click', 'button', function () {// do something here});  
 
 
 
  & lt; Div class = "buttons" & gt; Will apply. & Lt ;! - & lt; Button & gt; That is dynamically generated and added here - & gt; & Lt; / Div & gt;