jQuery - Dynamically Create Button and Attach Event Handler

Question

I would like to dynamically add a button control to a table using jQuery and attach a click event handler  I tried the following  without success       myButton   click function          var test       lt button gt Test lt  button gt    click function              alert  hi                     nodeAttributeHeader   attr  style    display  table-row             addNodeTable tr last   before   lt tr gt  lt td gt     test html       lt  td gt  lt  tr gt          The above code successfully adds a new row  but it doesn t handle adding the button correctly  How would I accomplish this using jQuery

User · Answer

You were just adding the html string  Not the element you created with a click event listener   Try This    lt html gt   lt head gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 2 6 jquery min js  gt  lt  script gt   lt  head gt   lt body gt       lt table id  addNodeTable  gt           lt tr gt               lt td gt                  Row 1              lt  td gt           lt  tr gt           lt tr  gt               lt td gt                  Row 2              lt  td gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt   lt script type  text javascript  gt        document  ready function             var test       lt button gt Test lt  button gt    click function                  alert  hi                            addNodeTable tr last   append   lt tr gt  lt td gt  lt  td gt  lt  tr gt    find  td last   append test             lt  script gt

User · Answer

Quick fix  Create whole structure tr   td   button  then find button inside  attach event on it  end filtering of chain and at the and insert it into dom       myButton   click function          var test       lt tr gt  lt td gt  lt button gt Test lt  button gt  lt  td gt  lt  tr gt    find  button   click function              alert  hi           end             nodeAttributeHeader   attr  style    display  table-row             addNodeTable tr last   before test

User · Answer

Your problem is that you re converting the button into an HTML snippet when you add it to the table  but that snippet is not the same object as the one that has the click handler on it       myButton   click function          var test       lt button gt Test lt  button gt    click function              alert  hi                     nodeAttributeHeader   css  display    table-row       NB  changed      var tr       lt tr gt    insertBefore   addNodeTable tr last        var td       lt td gt    append test  appendTo tr

User · Answer

Calling  html   serializes the element to a string  so all event handlers and other associated data is lost  Here s how I d do it       myButton   click function          var test       lt button  gt                  text   Test           click  function      alert  hi                   var parent       lt tr gt  lt td gt  lt  td gt  lt  tr gt    children   append test  end             addNodeTable tr last   before parent         Or       myButton   click function              var test       lt button  gt                  text   Test           click  function      alert  hi             wrap   lt tr gt  lt td gt  lt  td gt  lt  tr gt    closest  tr             addNodeTable tr last   before test         If you don t like passing a map of properties to      you can instead use       lt button  gt         text  Test        click function      alert  hi            or      lt button gt Test lt  button gt    click function      alert  hi

User · Answer

You can either use onclick inside the button to ensure the event is preserved  or else attach the button click handler by finding the button after it is inserted  The test html   call will not serialize the event

[javascript] jQuery - Dynamically Create Button and Attach Event Handler

Examples related to javascript

Examples related to jquery