Event handler not working on dynamic content

Question

I have a  tag A in which when clicked on  it appends another tag B to perform an action B on click  So when I click on tag B  action B is performed  However  the  on method does not seems to be working on the dynamically created tag B    My html and jquery for tag A is as below    lt a id  address  class  add address btn btn-inverse btn-medium pull-right push-top  gt Add Shipping address lt  a gt       add address   click function          Add another  lt a gt        document  append   lt a id  address   class  pull-right update btn btn-inverse btn-medium push-top  gt Update lt  a gt          When tag B is clicked  some action B is performed  My jquery is as below       update   on  click  function        action B       I have some non dynamic content which has class   update  as well  In the  on   method above works fine for the non dynamic content  but not for the dynamic content   How can I make it work for dynamic content

User · Answer

You are missing the selector in the  on function    on eventType  selector  function    This selector is very important   http   api jquery com on      If new HTML is being injected into the page  select the elements and   attach event handlers after the new HTML is placed into the page  Or    use delegated events to attach an event handler   See jQuery 1 9  live   is not a function for more details

User · Answer

You have to add the selector parameter  otherwise the event is directly bound instead of delegated  which only works if the element already exists  so it doesn t work for dynamically loaded content    See http   api jquery com on  direct-and-delegated-events  Change your code to    document body  on  click     update   function      The jQuery set receives the event then delegates it to elements matching the selector given as argument  This means that contrary to when using live  the jQuery set elements must exist when you execute the code   As this answers receives a lot of attention  here are two supplementary advises    1  When it s possible  try to bind the event listener to the most precise element  to avoid useless event handling   That is  if you re adding an element of class b to an existing element of id a  then don t use    document body  on  click     a  b   function      but use      a   on  click     b   function      2  Be careful  when you add an element with an id  to ensure you re not adding it twice  Not only is it  illegal  in HTML to have two elements with the same id but it breaks a lot of things  For example a selector   c  would retrieve only one element with this id

[jquery] Event handler not working on dynamic content

Examples related to jquery

Examples related to dynamic-content

Examples related to static-content