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
The problem I have is that after the initial loop, whatever box I add through AJAX or DOM, the event will not be bound.
I have found this plugin (), but before I get 5k on my pages with any other plugin, I want to see if anyone knows a way to do this, either with jQuery 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 was dynamically creating elements with the class name dosomething , then you will force that event with a parent who already exists, often 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;
Comments
Post a Comment