Event binding on dynamically created elements

Question

I have a bit of code where I am looping through all the select boxes on a page and binding a  hover event to them to do a bit of twiddling with their width on mouse on off   This happens on page ready and works just fine   The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won t have the event bound   I have found this plugin  jQuery Live Query Plugin   but before I add another 5k to my pages with a plugin  I want to see if anyone knows a way to do this  either with jQuery directly or by another option

User · Answer

Another solution is to add the listener when creating the element  Instead of put the listener in the body  you put the listener in the element in the moment that you create it   var myElement       lt button  gt          text   Go to Google        myElement bind   click   goToGoogle   myElement append  body      function goToGoogle event       window location replace  http   www google com

User · Answer

This is a pure JavaScript solution without any libraries or plugins   document addEventListener  click   function  e        if  hasClass e target   bu                  bu clicked            Do your thing       else if  hasClass e target   test                  test clicked            Do your other thing          false     where hasClass is  function hasClass elem  className        return elem className split      indexOf className   gt  -1      Live demo  Credit goes to Dave and Sime Vidas  Using more modern JS  hasClass can be implemented as   function hasClass elem  className        return elem classList contains className

User · Answer

Take note of  MAIN  class the element is placed  for example    lt div class  container  gt        lt ul class  select  gt            lt li gt  First lt  li gt            lt li gt Second lt  li gt       lt  ul gt   lt  div gt    In the above scenario  the MAIN object the jQuery will watch is  container    Then you will basically have elements names under container such as ul  li  and select     document  ready function e            container   on   click    select   function e            alert  CLICKED

User · Answer

I prefer using the selector and I apply it on the document   This binds itself on the document and will be applicable to the elements that will be rendered after page load   For example     document  on  click    selector   function            Your code here

User · Answer

You could simply wrap your event binding call up into a function and then invoke it twice  once on document ready and once after your event that adds the new DOM elements  If you do that you ll want to avoid binding the same event twice on the existing elements so you ll need either unbind the existing events or  better  only bind to the DOM elements that are newly created  The code would look something like this   function addCallbacks eles       eles hover function   alert  gotcha            document  ready function        addCallbacks     myEles                add elements     addCallbacks     myNewElements

User · Answer

This is done by event delegation  Event will get bind on wrapper-class element but will be delegated to selector-class element  This is how it works      wrapper-class   on  quot click quot     selector-class   function            Your code here      And HTML  lt div class  quot wrapper-class quot  gt       lt button class  quot selector-class quot  gt        Click Me       lt  button gt   lt  div gt        Note  wrapper-class element can be anything ex  document  body or your wrapper  Wrapper should already exist  However  selector doesn t necessarily needs to be presented at page loading time  It may come later and the event will bind on selector without fail

User · Answer

you could use      buttons   on  click    button   function           your magic goes here       or      buttons   delegate  button    click   function            your magic goes here       these two methods are equivalent but have a different order of parameters   see  jQuery Delegate Event

User · Answer

Another flexible solution to create elements and bind events   source      creating a dynamic element  container div  var  div       lt div gt     id   myid1   class   myclass        creating a dynamic button  var  btn       lt button gt      type   button   text   Click me   class   btn          binding the event   btn click function        for mouseover-- gt   btn on  mouseover   function          console log  clicked             append dynamic button to the dynamic container  div append  btn       add the dynamically created element s  to a static element     box   append  div     Note  This will create an event handler instance for each element  may affect performance when used in loops

User · Answer

Try to use  live   instead of  bind    the  live   will bind  hover to your checkbox after the Ajax request executes

User · Answer

As of jQuery 1 7 you should use jQuery fn on with the selector parameter filled    staticAncestors  on eventName  dynamicChild  function         Explanation  This is called event delegation and works as followed  The event is attached to a static parent  staticAncestors  of the element that should be handled  This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements  The handler then checks if the element that triggered the event matches your selector  dynamicChild   When there is a match then your custom handler function is executed   Prior to this  the recommended approach was to use live      selector  live  eventName  function         However  live   was deprecated in 1 7 in favour of on    and completely removed in 1 9  The live   signature    selector  live  eventName  function             can be replaced with the following on   signature    document  on  eventName  selector  function          For example  if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists  this is the nub of the problem here  you need something that exists to bind to  don t bind to the dynamic content   this can be  and the easiest option  is document  Though bear in mind document may not be the most efficient option    document  on  mouseover mouseout     dosomething   function           what you want to happen when mouseover and mouseout         occurs on elements that match   dosomething       Any parent that exists at the time the event is bound is fine  For example     buttons   on  click    button   function           do something here      would apply to  lt div class  quot buttons quot  gt       lt  --  lt button gt s that are generated dynamically and added here -- gt   lt  div gt

User · Answer

Bind the event to a parent which already exists     document  on  click    selector   function            Your code here

User · Answer

I was looking a solution to get   bind and   unbind working without problems in dynamically added elements     As on   makes the trick to attach events  in order to create a fake unbind on those I came to   const sendAction   function e            bind the click    body   on  click    button send   sendAction        unbind the click    body   on  click    button send   function

User · Answer

Try to use  live   instead of  bind    the  live   will bind  hover to your checkbox after the Ajax request executes

User · Answer

You can add events to objects when you create them  If you are adding the same events to multiple objects at different times  creating a named function might be the way to go   var mouseOverHandler   function            Do stuff    var mouseOutHandler   function             Do stuff       function            On the document load  apply to existing elements        select   hover mouseOverHandler  mouseOutHandler           This next part would be in the callback from your Ajax call     lt select gt  lt  select gt         append     Your  lt option gt s           hover mouseOverHandler  mouseOutHandler       appendTo     Wherever you need the select box

User · Answer

You can use the live   method to bind elements  even newly created ones  to events and handlers  like the onclick event   Here is a sample code I have written  where you can see how the live   method binds chosen elements  even newly created ones  to events    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt           lt title gt Untitled Document lt  title gt       lt  head gt        lt body gt           lt script src  http   code jquery com jquery-latest js  gt  lt  script gt           lt script src  http   ajax aspnetcdn com ajax jquery ui 1 8 16 jquery-ui min js  gt  lt  script gt            lt input type  button  id  theButton  value  Click    gt           lt script type  text javascript  gt                document  ready function                                             FOO   live  click   function    alert  It Works                           var  dialog       lt div gt  lt  div gt    html   lt div id  container  gt  lt input type   button  id  CUSTOM  value  click   gt This dialog will show every time  lt  div gt    dialog                                                                                                            autoOpen  false                                                                                                           tite   Basic Dialog                                                                                                                                   theButton   click function                                                  dialog dialog  open                            return  false                                                    CUSTOM   click function                                  container   append   lt input type  button  value  clickmee  class  FOO    gt  lt  br gt                             var button   document createElement  input                            button setAttribute  class   FOO                            button setAttribute  type   button                            button setAttribute  value   CLICKMEE                                container   append button                                                      FOO   click function                                                         alert  It Works                                                                                      lt  script gt       lt  body gt   lt  html gt

User · Answer

Another flexible solution to create elements and bind events   source      creating a dynamic element  container div  var  div       lt div gt     id   myid1   class   myclass        creating a dynamic button  var  btn       lt button gt      type   button   text   Click me   class   btn          binding the event   btn click function        for mouseover-- gt   btn on  mouseover   function          console log  clicked             append dynamic button to the dynamic container  div append  btn       add the dynamically created element s  to a static element     box   append  div     Note  This will create an event handler instance for each element  may affect performance when used in loops

User · Answer

You can attach event to element when dynamically created using jQuery html  attributes       As of jQuery 1 8  any jQuery instance method  a method of jQuery fn  can be used as a property of the object passed to the   second parameter     x000D   x000D  function handleDynamicElementEvent event    x000D    console log event type  this value  x000D    x000D     create and attach event to dynamic element x000D  jQuery   lt select gt      x000D      html    map Array 3   function    index    x000D        return new Option index  index  x000D          x000D      on    x000D        change  handleDynamicElementEvent x000D        x000D       x000D     appendTo  body    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Event binding on dynamically created elements  Single element     document body  on  click    element   function e           Child Element      document body  on  click    element     function e           Notice the added    An event will be triggered for all children of that element   I have noticed that     document body  on  click     element id  gt  element   function e           It is not working any more  but it was working before  I have been using jQuery from Google CDN  but I don t know if they changed it

User · Answer

Any parent that exists at the time the event is bound and if your page was dynamically creating elements with the class name button you would bind the event to a parent which already exists   x000D   x000D    document  ready function    x000D      Particular Parent chield click x000D        buttons   on  click   button  function    x000D      alert  Clicked    x000D          x000D     x000D      Dynamic event bind on button class   x000D      document  on  click    button  function    x000D      alert  Dymamic Clicked    x000D        x000D       input   addClass  button      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  buttons  gt  x000D     lt input type  button  value  1  gt  x000D     lt button gt 2 lt  button gt  x000D     lt input type  text  gt  x000D     lt button gt 3 lt  button gt    x000D     lt input type  button  value  5  gt    x000D     lt  div gt  x000D   lt button gt 6 lt  button gt  x000D   x000D   x000D

User · Answer

Here is why dynamically created elements do not respond to clicks nbsp     x000D   x000D  var body      body    x000D  var btns      button    x000D  var btnB       lt button gt B lt  button gt     x000D       lt button gt B lt  button gt   is not yet in the document  x000D     Thus      button    gives    lt button gt A lt  button gt     x000D     Only   lt button gt A lt  button gt   gets a click listener  x000D  btns on  click   function      x000D    console log this   x000D      x000D     Too late for   lt button gt B lt  button gt      x000D  body append btnB   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D    As a workaround  you have to listen to all clicks and check the source element nbsp     x000D   x000D  var body      body    x000D  var btnB       lt button gt B lt  button gt     x000D  var btnC       lt button gt C lt  button gt     x000D     Listen to all clicks and x000D     check if the source element x000D     is a   lt button gt  lt  button gt    x000D  body on  click   function  ev    x000D    if    ev target  is  button      x000D      console log ev target   x000D      x000D      x000D     Now you can add any number x000D     of   lt button gt  lt  button gt    x000D  body append btnB   x000D  body append btnC   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D    This is called  Event Delegation   Good news  it s a builtin feature in jQuery  -    x000D   x000D  var i   11  x000D  var body      body    x000D  body on  click    button   function      x000D    var letter    i    toString 36  toUpperCase    x000D    body append     lt button gt     letter     lt  button gt      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D

User · Answer

There is a good explanation in the documentation of jQuery fn on   In short      Event handlers are bound only to the currently selected elements  they must exist on the page at the time your code makes the call to  on      Thus in the following example  dataTable tbody tr must exist before the code is generated       dataTable tbody tr   on  click   function event       console log   this  text           If new HTML is being injected into the page  it is preferable to use delegated events to attach an event handler  as described next   Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time  For example  if the table exists  but the rows are added dynamically using code  the following will handle it       dataTable tbody   on  click    tr   function event       console log   this  text           In addition to their ability to handle events on descendant elements which are not yet created  another advantage of delegated events is their potential for much lower overhead when many elements must be monitored  On a data table with 1 000 rows in its tbody  the first code example attaches a handler to 1 000 elements   A delegated-events approach  the second code example  attaches an event handler to only one element  the tbody  and the event only needs to bubble up one level  from the clicked tr to tbody    Note  Delegated events do not work for SVG

User · Answer

Take note of  MAIN  class the element is placed  for example    lt div class  container  gt        lt ul class  select  gt            lt li gt  First lt  li gt            lt li gt Second lt  li gt       lt  ul gt   lt  div gt    In the above scenario  the MAIN object the jQuery will watch is  container    Then you will basically have elements names under container such as ul  li  and select     document  ready function e            container   on   click    select   function e            alert  CLICKED

User · Answer

This is done by event delegation  Event will get bind on wrapper-class element but will be delegated to selector-class element  This is how it works      wrapper-class   on  quot click quot     selector-class   function            Your code here      And HTML  lt div class  quot wrapper-class quot  gt       lt button class  quot selector-class quot  gt        Click Me       lt  button gt   lt  div gt        Note  wrapper-class element can be anything ex  document  body or your wrapper  Wrapper should already exist  However  selector doesn t necessarily needs to be presented at page loading time  It may come later and the event will bind on selector without fail

User · Answer

you could use      buttons   on  click    button   function           your magic goes here       or      buttons   delegate  button    click   function            your magic goes here       these two methods are equivalent but have a different order of parameters   see  jQuery Delegate Event

User · Answer

Use the  on   method of jQuery http   api jquery com on  to attach event handlers to live element   Also as of version 1 9  live   method is removed

User · Answer

Try like this way -     document  on   click     click-activity   function

User · Answer

You could simply wrap your event binding call up into a function and then invoke it twice  once on document ready and once after your event that adds the new DOM elements  If you do that you ll want to avoid binding the same event twice on the existing elements so you ll need either unbind the existing events or  better  only bind to the DOM elements that are newly created  The code would look something like this   function addCallbacks eles       eles hover function   alert  gotcha            document  ready function        addCallbacks     myEles                add elements     addCallbacks     myNewElements

User · Answer

Use the  on   method of jQuery http   api jquery com on  to attach event handlers to live element   Also as of version 1 9  live   method is removed

User · Answer

I prefer to have event listeners deployed in a modular function fashion rather than scripting a document level event listener  So  I do like below  Note  you can t oversubscribe an element with the same event listener so don t worry about attaching a listener more than once - only one sticks    x000D   x000D  var iterations   4  x000D  var button  x000D  var body   document querySelector  body    x000D   x000D  for  var i   0  i  lt  iterations  i      x000D      button   document createElement  button    x000D      button classList add  my-button    x000D      button appendChild document createTextNode i    x000D      button addEventListener  click   myButtonWasClicked   x000D      body appendChild button   x000D    x000D   x000D  function myButtonWasClicked e    x000D      console log e target     access to this specific button x000D    x000D   x000D   x000D

User · Answer

Bind the event to a parent which already exists     document  on  click    selector   function            Your code here

User · Answer

lt html gt       lt head gt           lt title gt HTML Document lt  title gt           lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt       lt  head gt        lt body gt           lt div id  hover-id  gt              Hello World          lt  div gt            lt script gt              jQuery document  ready function                       document  on  mouseover     hover-id   function                          this  css  color   yellowgreen                                           document  on  mouseout     hover-id   function                          this  css  color   black                                                 lt  script gt       lt  body gt   lt  html gt

User · Answer

Here is why dynamically created elements do not respond to clicks nbsp     x000D   x000D  var body      body    x000D  var btns      button    x000D  var btnB       lt button gt B lt  button gt     x000D       lt button gt B lt  button gt   is not yet in the document  x000D     Thus      button    gives    lt button gt A lt  button gt     x000D     Only   lt button gt A lt  button gt   gets a click listener  x000D  btns on  click   function      x000D    console log this   x000D      x000D     Too late for   lt button gt B lt  button gt      x000D  body append btnB   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D    As a workaround  you have to listen to all clicks and check the source element nbsp     x000D   x000D  var body      body    x000D  var btnB       lt button gt B lt  button gt     x000D  var btnC       lt button gt C lt  button gt     x000D     Listen to all clicks and x000D     check if the source element x000D     is a   lt button gt  lt  button gt    x000D  body on  click   function  ev    x000D    if    ev target  is  button      x000D      console log ev target   x000D      x000D      x000D     Now you can add any number x000D     of   lt button gt  lt  button gt    x000D  body append btnB   x000D  body append btnC   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D    This is called  Event Delegation   Good news  it s a builtin feature in jQuery  -    x000D   x000D  var i   11  x000D  var body      body    x000D  body on  click    button   function      x000D    var letter    i    toString 36  toUpperCase    x000D    body append     lt button gt     letter     lt  button gt      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button gt A lt  button gt  x000D   x000D   x000D

User · Answer

I prefer using the selector and I apply it on the document   This binds itself on the document and will be applicable to the elements that will be rendered after page load   For example     document  on  click    selector   function            Your code here

User · Answer

Try like this way -     document  on   click     click-activity   function

User · Answer

You can use the live   method to bind elements  even newly created ones  to events and handlers  like the onclick event   Here is a sample code I have written  where you can see how the live   method binds chosen elements  even newly created ones  to events    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt           lt title gt Untitled Document lt  title gt       lt  head gt        lt body gt           lt script src  http   code jquery com jquery-latest js  gt  lt  script gt           lt script src  http   ajax aspnetcdn com ajax jquery ui 1 8 16 jquery-ui min js  gt  lt  script gt            lt input type  button  id  theButton  value  Click    gt           lt script type  text javascript  gt                document  ready function                                             FOO   live  click   function    alert  It Works                           var  dialog       lt div gt  lt  div gt    html   lt div id  container  gt  lt input type   button  id  CUSTOM  value  click   gt This dialog will show every time  lt  div gt    dialog                                                                                                            autoOpen  false                                                                                                           tite   Basic Dialog                                                                                                                                   theButton   click function                                                  dialog dialog  open                            return  false                                                    CUSTOM   click function                                  container   append   lt input type  button  value  clickmee  class  FOO    gt  lt  br gt                             var button   document createElement  input                            button setAttribute  class   FOO                            button setAttribute  type   button                            button setAttribute  value   CLICKMEE                                container   append button                                                      FOO   click function                                                         alert  It Works                                                                                      lt  script gt       lt  body gt   lt  html gt

User · Answer

You can add events to objects when you create them  If you are adding the same events to multiple objects at different times  creating a named function might be the way to go   var mouseOverHandler   function            Do stuff    var mouseOutHandler   function             Do stuff       function            On the document load  apply to existing elements        select   hover mouseOverHandler  mouseOutHandler           This next part would be in the callback from your Ajax call     lt select gt  lt  select gt         append     Your  lt option gt s           hover mouseOverHandler  mouseOutHandler       appendTo     Wherever you need the select box

User · Answer

I was looking a solution to get   bind and   unbind working without problems in dynamically added elements     As on   makes the trick to attach events  in order to create a fake unbind on those I came to   const sendAction   function e            bind the click    body   on  click    button send   sendAction        unbind the click    body   on  click    button send   function

User · Answer

Event binding on dynamically created elements  Single element     document body  on  click    element   function e           Child Element      document body  on  click    element     function e           Notice the added    An event will be triggered for all children of that element   I have noticed that     document body  on  click     element id  gt  element   function e           It is not working any more  but it was working before  I have been using jQuery from Google CDN  but I don t know if they changed it

User · Answer

You can add events to objects when you create them  If you are adding the same events to multiple objects at different times  creating a named function might be the way to go   var mouseOverHandler   function            Do stuff    var mouseOutHandler   function             Do stuff       function            On the document load  apply to existing elements        select   hover mouseOverHandler  mouseOutHandler           This next part would be in the callback from your Ajax call     lt select gt  lt  select gt         append     Your  lt option gt s           hover mouseOverHandler  mouseOutHandler       appendTo     Wherever you need the select box

User · Answer

You can attach event to element when dynamically created using jQuery html  attributes       As of jQuery 1 8  any jQuery instance method  a method of jQuery fn  can be used as a property of the object passed to the   second parameter     x000D   x000D  function handleDynamicElementEvent event    x000D    console log event type  this value  x000D    x000D     create and attach event to dynamic element x000D  jQuery   lt select gt      x000D      html    map Array 3   function    index    x000D        return new Option index  index  x000D          x000D      on    x000D        change  handleDynamicElementEvent x000D        x000D       x000D     appendTo  body    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  x000D   lt  script gt  x000D   x000D   x000D

User · Answer

lt html gt       lt head gt           lt title gt HTML Document lt  title gt           lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt       lt  head gt        lt body gt           lt div id  hover-id  gt              Hello World          lt  div gt            lt script gt              jQuery document  ready function                       document  on  mouseover     hover-id   function                          this  css  color   yellowgreen                                           document  on  mouseout     hover-id   function                          this  css  color   black                                                 lt  script gt       lt  body gt   lt  html gt

User · Answer

You could simply wrap your event binding call up into a function and then invoke it twice  once on document ready and once after your event that adds the new DOM elements  If you do that you ll want to avoid binding the same event twice on the existing elements so you ll need either unbind the existing events or  better  only bind to the DOM elements that are newly created  The code would look something like this   function addCallbacks eles       eles hover function   alert  gotcha            document  ready function        addCallbacks     myEles                add elements     addCallbacks     myNewElements

User · Answer

This is a pure JavaScript solution without any libraries or plugins   document addEventListener  click   function  e        if  hasClass e target   bu                  bu clicked            Do your thing       else if  hasClass e target   test                  test clicked            Do your other thing          false     where hasClass is  function hasClass elem  className        return elem className split      indexOf className   gt  -1      Live demo  Credit goes to Dave and Sime Vidas  Using more modern JS  hasClass can be implemented as   function hasClass elem  className        return elem classList contains className

User · Answer

There is a good explanation in the documentation of jQuery fn on   In short      Event handlers are bound only to the currently selected elements  they must exist on the page at the time your code makes the call to  on      Thus in the following example  dataTable tbody tr must exist before the code is generated       dataTable tbody tr   on  click   function event       console log   this  text           If new HTML is being injected into the page  it is preferable to use delegated events to attach an event handler  as described next   Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time  For example  if the table exists  but the rows are added dynamically using code  the following will handle it       dataTable tbody   on  click    tr   function event       console log   this  text           In addition to their ability to handle events on descendant elements which are not yet created  another advantage of delegated events is their potential for much lower overhead when many elements must be monitored  On a data table with 1 000 rows in its tbody  the first code example attaches a handler to 1 000 elements   A delegated-events approach  the second code example  attaches an event handler to only one element  the tbody  and the event only needs to bubble up one level  from the clicked tr to tbody    Note  Delegated events do not work for SVG

User · Answer

You could simply wrap your event binding call up into a function and then invoke it twice  once on document ready and once after your event that adds the new DOM elements  If you do that you ll want to avoid binding the same event twice on the existing elements so you ll need either unbind the existing events or  better  only bind to the DOM elements that are newly created  The code would look something like this   function addCallbacks eles       eles hover function   alert  gotcha            document  ready function        addCallbacks     myEles                add elements     addCallbacks     myNewElements

User · Answer

Another solution is to add the listener when creating the element  Instead of put the listener in the body  you put the listener in the element in the moment that you create it   var myElement       lt button  gt          text   Go to Google        myElement bind   click   goToGoogle   myElement append  body      function goToGoogle event       window location replace  http   www google com

User · Answer

As of jQuery 1 7 you should use jQuery fn on with the selector parameter filled    staticAncestors  on eventName  dynamicChild  function         Explanation  This is called event delegation and works as followed  The event is attached to a static parent  staticAncestors  of the element that should be handled  This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements  The handler then checks if the element that triggered the event matches your selector  dynamicChild   When there is a match then your custom handler function is executed   Prior to this  the recommended approach was to use live      selector  live  eventName  function         However  live   was deprecated in 1 7 in favour of on    and completely removed in 1 9  The live   signature    selector  live  eventName  function             can be replaced with the following on   signature    document  on  eventName  selector  function          For example  if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists  this is the nub of the problem here  you need something that exists to bind to  don t bind to the dynamic content   this can be  and the easiest option  is document  Though bear in mind document may not be the most efficient option    document  on  mouseover mouseout     dosomething   function           what you want to happen when mouseover and mouseout         occurs on elements that match   dosomething       Any parent that exists at the time the event is bound is fine  For example     buttons   on  click    button   function           do something here      would apply to  lt div class  quot buttons quot  gt       lt  --  lt button gt s that are generated dynamically and added here -- gt   lt  div gt

User · Answer

I prefer to have event listeners deployed in a modular function fashion rather than scripting a document level event listener  So  I do like below  Note  you can t oversubscribe an element with the same event listener so don t worry about attaching a listener more than once - only one sticks    x000D   x000D  var iterations   4  x000D  var button  x000D  var body   document querySelector  body    x000D   x000D  for  var i   0  i  lt  iterations  i      x000D      button   document createElement  button    x000D      button classList add  my-button    x000D      button appendChild document createTextNode i    x000D      button addEventListener  click   myButtonWasClicked   x000D      body appendChild button   x000D    x000D   x000D  function myButtonWasClicked e    x000D      console log e target     access to this specific button x000D    x000D   x000D   x000D

User · Answer

Any parent that exists at the time the event is bound and if your page was dynamically creating elements with the class name button you would bind the event to a parent which already exists   x000D   x000D    document  ready function    x000D      Particular Parent chield click x000D        buttons   on  click   button  function    x000D      alert  Clicked    x000D          x000D     x000D      Dynamic event bind on button class   x000D      document  on  click    button  function    x000D      alert  Dymamic Clicked    x000D        x000D       input   addClass  button      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  buttons  gt  x000D     lt input type  button  value  1  gt  x000D     lt button gt 2 lt  button gt  x000D     lt input type  text  gt  x000D     lt button gt 3 lt  button gt    x000D     lt input type  button  value  5  gt    x000D     lt  div gt  x000D   lt button gt 6 lt  button gt  x000D   x000D   x000D

User · Answer

You can add events to objects when you create them  If you are adding the same events to multiple objects at different times  creating a named function might be the way to go   var mouseOverHandler   function            Do stuff    var mouseOutHandler   function             Do stuff       function            On the document load  apply to existing elements        select   hover mouseOverHandler  mouseOutHandler           This next part would be in the callback from your Ajax call     lt select gt  lt  select gt         append     Your  lt option gt s           hover mouseOverHandler  mouseOutHandler       appendTo     Wherever you need the select box

[javascript] Event binding on dynamically created elements?

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to unobtrusive-javascript