Jquery click event not working after append method

Question

So I have this button which adds a new row to the table  however my problem is that it does not listen to the  new participant form click event anymore after the append method has taken place   http   jsfiddle net cTEFG    Click Add New Entry then click on the Form name        add new participant   click function           var first name       f name participant   val        var last name       l name participant   val        var role       new participant role option selected   text        var email       email participant   val              registered participants   append   lt tr gt  lt td gt  lt a href     class  new participant form  gt Participant Registration lt  a gt  lt  td gt  lt td gt   first name      last name   lt  td gt  lt td gt   role   lt  td gt  lt td gt 0  done lt  td gt  lt  tr gt                       new participant form   click function              var  td     this  closest  tr   children  td             var part name    td eq 1  text            alert part name                  HTML   lt table id  registered participants  class  tablesorter  gt    lt thead gt   lt tr gt    lt th gt Form lt  th gt   lt th gt Name lt  th gt   lt th gt Role lt  th gt   lt th gt Progress  lt  th gt     lt  tr gt    lt  thead gt     lt tbody gt   lt tr gt    lt td gt  lt a href     class  new participant form  gt Participant Registration lt  a gt  lt  td gt   lt td gt Smith Johnson lt  td gt   lt td gt Parent lt  td gt   lt td gt 60  done lt  td gt     lt  tr gt    lt  tbody gt    lt  table gt    lt button id  add new participant  gt  lt  span gt Add New Entry lt  button gt

User · Accepted Answer

Use on        registered participants   on  click     new participant form   function       So that the click is delegated to any element in  registered participants having the class new participant form  even if it s added after you bound the event handler

User · Answer

This problem could be solved as mentioned using the  on on jQuery 1 7  versions    Unfortunately  this didn t work within my code  and I have 1 11  so I used      body   delegate   logout-link   click  function      http   api jquery com delegate      As of jQuery 3 0   delegate   has been deprecated  It was superseded   by the  on   method since jQuery 1 7  so its use was already   discouraged  For earlier versions  however  it remains the most   effective means to use event delegation  More information on event   binding and delegation is in the  on   method  In general  these are   the equivalent templates for the two methods       jQuery 1 4 3     elements   delegate  selector  events  data  handler       jQuery 1 7     elements   on  events  selector  data  handler      This comment might help others

User · Answer

TRY THIS  As of jQuery version 1 7   the on   method is the new replacement for the bind    live   and delegate   methods   SO ADD THIS     document  on  click    a new participant form    function           console log  clicked          Or for more information CHECK HERE

User · Answer

Problem Solved            Changed to delegate   method to use delegation from the body     body   delegate   boundOnPageLoaded    click   function       alert  Delegated Button Clicked

User · Answer

The  on   method is used to delegate events to elements  dynamically added or already present in the DOM    x000D   x000D     STATIC-PARENT              on  EVENT    DYNAMIC-CHILD x000D      registered participants   on  click     new participant form   function     x000D   x000D    var  td     this  closest  tr   find  td    x000D    var part name    td eq 1  text    x000D    console log  part name    x000D   x000D      x000D   x000D   x000D      add new participant   click function     x000D   x000D    var first name     trim      f name participant   val      x000D    var last name      trim      l name participant   val      x000D    var role             new participant role   val    x000D    var email            email participant   val    x000D     x000D    if  first name  amp  amp   last name  return  x000D   x000D        registered participants   append   lt tr gt  lt td gt  lt a href     class  new participant form  gt Participant Registration lt  a gt  lt  td gt  lt td gt     first name         last name     lt  td gt  lt td gt     role     lt  td gt  lt td gt 0  done lt  td gt  lt  tr gt     x000D   x000D      x000D   lt table id  registered participants  class  tablesorter  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Form lt  th gt  x000D         lt th gt Name lt  th gt  x000D         lt th gt Role lt  th gt  x000D         lt th gt Progress  lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  lt a href     class  new participant form  gt Participant Registration lt  a gt  lt  td gt  x000D         lt td gt Smith Johnson lt  td gt  x000D         lt td gt Parent lt  td gt  x000D         lt td gt 60  done lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt input type  text  id  f name participant  placeholder  Name  gt  x000D   lt input type  text  id  l name participant  placeholder  Surname  gt  x000D   lt select id  new participant role  gt  x000D     lt option gt Parent lt  option gt  x000D     lt option gt Child lt  option gt  x000D   lt  select gt  x000D   lt button id  add new participant  gt Add New Entry lt  button gt  x000D   x000D   lt script src    ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    Read more  http   api jquery com on

[jquery] Jquery click event not working after append method

Examples related to jquery

Examples related to html