jQuery on create event for dynamically-created elements

Question

I need to be able to dynamically create  lt select gt  element and turn it into jQuery  combobox    This should be element creation event  as opposed to some  click  event in which case I could just use jQuery  on     So does something like this exist     document  on  create    select   function           this  combobox        I m reluctant to use livequery  because it s very outdated   UPDATE The mentioned select combobox is loaded via ajax into a jQuery colorbox  modal window   thus the problem - I can only initiate combobox using colorbox onComplete  however on change of one combobox another select combobox must be dynamically created  therefor I need a more generic way to detect creation of an element  selectin this case    UPDATE2 To try and explain the problem further - I have select combobox elements created recursively  there is also a lot of initiating code inside  combobox    therefore if I used a classic approach  like in  bipen s answer  my code would inflate to insane levels  Hope this explains the problem better   UPDATE3 Thanks everyone  I now understand that since deprecation of DOMNodeInserted there is a void left in DOM mutation and there is no solution to this problem  I ll just have to rethink my application

User · Answer

As mentioned in several other answers  mutation events have been deprecated  so you should use MutationObserver instead  Since nobody has given any details on that yet  here it goes     Basic JavaScript API  The API for MutationObserver is fairly simple  It s not quite as simple as the mutation events  but it s still okay    x000D   x000D  function callback records    x000D    records forEach function  record    x000D      var list   record addedNodes  x000D      var i   list length - 1  x000D       x000D   for     i  gt  -1  i--     x000D     if  list i  nodeName      SELECT     x000D          Insert code here    x000D       console log list i    x000D       x000D     x000D        x000D    x000D   x000D  var observer   new MutationObserver callback   x000D   x000D  var targetNode   document body  x000D   x000D  observer observe targetNode    childList  true  subtree  true     x000D   lt script gt  x000D       For testing x000D    setTimeout function     x000D      var  el   document createElement  select    x000D      document body appendChild  el   x000D       500   x000D   lt  script gt  x000D   x000D   x000D    Let s break that down   var observer   new MutationObserver callback     This creates the observer  The observer isn t watching anything yet  this is just where the event listener gets attached   observer observe targetNode    childList  true  subtree  true       This makes the observer start up  The first argument is the node that the observer will watch for changes on  The second argument is the options for what to watch for    childList means I want to watch for child elements being added or removed  subtree is a modifier that extends childList to watch for changes anywhere in this element s subtree  otherwise  it would just look at changes directly within targetNode     The other two main options besides childList are attributes and characterData  which mean about what they sound like  You must use one of those three   function callback records      records forEach function  record      Things get a little tricky inside the callback  The callback receives an array of MutationRecords  Each MutationRecord can describe several changes of one type  childList  attributes  or characterData   Since I only told the observer to watch for childList  I won t bother checking the type   var list   record addedNodes    Right here I grab a NodeList of all the child nodes that were added  This will be empty for all the records where nodes aren t added  and there may be many such records    From there on  I loop through the added nodes and find any that are  lt select gt  elements   Nothing really complex here   jQuery     but you asked for jQuery  Fine    function         var observers            event special domNodeInserted          setup  function setup data  namespaces          var observer   new MutationObserver checkObservers          observers push  this  observer                    teardown  function teardown namespaces          var obs   getObserverData this          obs 1  disconnect           observers     grep observers  function item            return item     obs                        remove  function remove handleObj          var obs   getObserverData this          obs 2    obs 2  filter function event            return event 0      handleObj selector  amp  amp  event 1      handleObj handler                        add  function add handleObj          var obs   getObserverData this          var opts     extend               childList  true          subtree  true          handleObj data          obs 1  observe this  opts          obs 2  push  handleObj selector  handleObj handler                  function getObserverData element        var  el     element        return   grep observers  function item          return  el is item 0           0          function checkObservers records  observer        var obs     grep observers  function item          return item 1      observer         0        var triggers   obs 2        var changes            records forEach function record          if  record type      attributes             if  changes indexOf record target      -1              changes push record target                      return                   record addedNodes  toArray   forEach function el            if  changes indexOf el      -1              changes push el                                   triggers forEach function checkTrigger item          changes forEach function el            var  el     el            if   el is item 0                 el trigger  domNodeInserted                                        jQuery     This creates a new event called domNodeInserted  using the jQuery special events API  You can use it like so     document  on  domNodeInserted    select   function          this  combobox          I would personally suggest looking for a class because some libraries will create select elements for testing purposes   Naturally  you can also use  off  domNodeInserted        or fine-tune the watching by passing in data like this     document body  on  domNodeInserted    select test       attributes  true    subtree  false    function          this  combobox          This would trigger checking for the appearance of a select test element whenever attributes changed for elements directly inside the body   You can see it live below or on jsFiddle    x000D   x000D   function      x000D      document  on  domNodeInserted    select   function     x000D      console log this   x000D          this  combobox    x000D        x000D     jQuery   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script gt  x000D       For testing x000D    setTimeout function     x000D      var  el   document createElement  select    x000D      document body appendChild  el   x000D       500   x000D   lt  script gt  x000D   x000D   lt script gt  x000D     function      x000D   x000D      var observers       x000D   x000D        event special domNodeInserted     x000D   x000D        setup  function setup data  namespaces    x000D          var observer   new MutationObserver checkObservers   x000D   x000D          observers push  this  observer        x000D           x000D   x000D        teardown  function teardown namespaces    x000D          var obs   getObserverData this   x000D   x000D          obs 1  disconnect    x000D   x000D          observers     grep observers  function item    x000D            return item     obs  x000D              x000D           x000D   x000D        remove  function remove handleObj    x000D          var obs   getObserverData this   x000D   x000D          obs 2    obs 2  filter function event    x000D            return event 0      handleObj selector  amp  amp  event 1      handleObj handler  x000D              x000D           x000D   x000D        add  function add handleObj    x000D          var obs   getObserverData this   x000D   x000D          var opts     extend       x000D            childList  true  x000D            subtree  true x000D             handleObj data   x000D   x000D          obs 1  observe this  opts   x000D   x000D          obs 2  push  handleObj selector  handleObj handler    x000D          x000D         x000D   x000D      function getObserverData element    x000D        var  el     element   x000D   x000D        return   grep observers  function item    x000D          return  el is item 0    x000D           0   x000D        x000D   x000D      function checkObservers records  observer    x000D        var obs     grep observers  function item    x000D          return item 1      observer  x000D           0   x000D   x000D        var triggers   obs 2   x000D   x000D        var changes       x000D   x000D        records forEach function record    x000D          if  record type      attributes     x000D            if  changes indexOf record target      -1    x000D              changes push record target   x000D              x000D   x000D            return  x000D            x000D   x000D            record addedNodes  toArray   forEach function el    x000D            if  changes indexOf el      -1    x000D              changes push el   x000D              x000D             x000D            x000D   x000D        triggers forEach function checkTrigger item    x000D          changes forEach function el    x000D            var  el     el   x000D   x000D            if   el is item 0      x000D               el trigger  domNodeInserted    x000D              x000D              x000D            x000D        x000D   x000D       jQuery   x000D   lt  script gt  x000D   x000D   x000D      Note  This jQuery code is a fairly basic implementation  It does not trigger in cases where modifications elsewhere make your selector valid   For example  suppose your selector is  test select and the document already has a  lt select gt   Adding the class test to  lt body gt  will make the selector valid  but because I only check record target and record addedNodes  the event would not fire  The change has to happen to the element you wish to select itself   This could be avoided by querying for the selector whenever mutations happen  I chose not to do that to avoid causing duplicate events for elements that had already been handled  Properly dealing with adjacent or general sibling combinators would make things even trickier   For a more comprehensive solution  see https   github com pie6k jquery initialize  as mentioned in Damien    Ceallaigh s answer  However  the author of that library has announced that the library is old and suggests that you shouldn t use jQuery for this

User · Answer

instead of       quot  class quot   click  function            do something      You can write       body   on  click     class   function            do something

User · Answer

There is a plugin  adampietrasiak jquery initialize  which is based on MutationObserver that achieves this simply     initialize   some-element   function           this  css  color    blue

User · Answer

Just came up with this solution that seems to solve all my ajax problems   For on ready events I now use this   function loaded selector  callback         trigger after page load        function              callback   selector                  trigger after page update eg ajax event or jquery insert        document  on  DOMNodeInserted   selector  function              callback   this               loaded   foo   function el         some action     el css  background    black          And for normal trigger events I now use this     document  on  click     foo   function            some action       this  css  background    pink

User · Answer

One way  which seems reliable  though tested only in Firefox and Chrome  is to use JavaScript to listen for the animationend  or its camelCased  and prefixed  sibling animationEnd  event  and apply a short-lived  in the demo 0 01 second  animation to the element-type you plan to add  This  of course  is not an onCreate event  but approximates  in compliant browsers  an onInsertion type of event  the following is a proof-of-concept     document  on  webkitAnimationEnd animationend MSAnimationEnd oanimationend   function e       var eTarget   e target      console log eTarget tagName toLowerCase       added to     eTarget parentNode tagName toLowerCase           eTarget  draggable       or whatever other method you d prefer       With the following HTML    lt div class  wrapper  gt       lt button class  add  gt add a div element lt  button gt   lt  div gt    And  abbreviated  prefixed-versions-removed though present in the Fiddle  below  CSS      vendor-prefixed alternatives removed for brevity     keyframes added       0            color   fff           div       color   000         vendor-prefixed properties removed for brevity        animation  added 0 01s linear      animation-iteration-count  1      JS Fiddle demo   Obviously the CSS can be adjusted to suit the placement of the relevant elements  as well as the selector used in the jQuery  it should really be as close to the point of insertion as possible    Documentation of the event-names   Mozilla      animationend Microsoft    MSAnimationEnd Opera        oanimationend Webkit       webkitAnimationEnd W3C          animationend   References    caniuse com summary of compatibility of CSS Animations  CSS AnimationEvent Interface  W3C   JavaScript animationend vendor-support

User · Answer

if you are using angularjs you can write your own directive  I had the same problem whith bootstrapSwitch  I have to call         name  my-checkbox     bootstrapSwitch    in javascript but my html input object was not created at that time  So I write an own directive and create the input element with      lt input type  checkbox  checkbox-switch gt   In the directive I compile the element to get access via javascript an execute the jquery command  like your  combobox   command   Very important is to remove the attribute  Otherwise this directive will call itself and you have build a loop  app directive  checkboxSwitch   function  compile    return       link  function  scope  element            var input   element 0           input removeAttribute  checkbox-switch            var inputCompiled    compile input   scope  parent           inputCompiled bootstrapSwitch

User · Answer

create a  lt select gt  with id   append it to document   and call  combobox    var dynamicScript   lt select id  selectid  gt  lt option value  1  gt     lt  option gt       lt  select gt        body   append dynamicScript     append this to the place your wanted        selectid   combobox       get the id and add  combobox      this should do the trick   you can hide the select if you want and after  combobox show it  or else use find       document  find  select   combobox     though this is not good performancewise

User · Answer

For me binding to the body does not work  Binding to the document using jQuery bind   does     document  bind  DOMNodeInserted  function e                var target   e target

User · Answer

This could be done with DOM4 MutationObservers but will only work in Firefox 14  Chrome 18   for now    However there is an  epic hack   author s words not mine   that works in all browsers that support CSS3 animations which are  IE10  Firefox 5   Chrome 3   Opera 12  Android 2 0   Safari 4   See the demo from the blog  The hack is to use a CSS3 animation event with a given name that is observed and acted upon in JavaScript

User · Answer

You can on the DOMNodeInserted event to get an event for when it s added to the document by your code      body   on  DOMNodeInserted    select   function                this  combobox             lt select gt    appendTo  body        lt select gt    appendTo  body      Fiddled here  http   jsfiddle net Codesleuth qLAB2 3   EDIT  after reading around I just need to double check DOMNodeInserted won t cause problems across browsers  This question from 2010 suggests IE doesn t support the event  so test it if you can   See here   link  Warning  the DOMNodeInserted event type is defined in this specification for reference and completeness  but this specification deprecates the use of this event type

User · Answer

You can use DOMNodeInserted mutation event  no need delegation       body   on  DOMNodeInserted   function e        var target   e target    inserted element          EDIT  Mutation events are deprecated  use mutation observer instead

User · Answer

I Think it s worth mentioning that in some cases  this would work      document   ajaxComplete function        Do Stuff

[javascript] jQuery "on create" event for dynamically-created elements

Basic JavaScript API

jQuery

Note

Examples related to javascript

Examples related to jquery

Examples related to combobox