Jquery button click function is not working

Question

I am trying to create dynamic form where user can add dynamic text-fields based on their requirement  Here is my jquery code       document  ready function             add   click function             var intId       buildyourform div   length  1          var fieldWrapper       lt div class   fieldwrapper   name   field    intId       id   field    intId        gt             var fName       lt input type   text   name   name   class   fieldname   id   tb   intId    1    gt             var lname       lt input type   text   name   email   class   lastname   id   tb   intId    2    gt             var removeButton       lt input type   button   class   remove   value   -     gt              var addButton       lt input type   button   class   add   id   add   value         gt            removeButton click function                   this  parent   remove                        fieldWrapper append fName           fieldWrapper append lname           fieldWrapper append removeButton           fieldWrapper append addButton             this  remove                buildyourform   append fieldWrapper                   and Html code is       lt fieldset id  buildyourform  gt       lt legend gt Build your own form  lt  legend gt       lt div class  fieldwrapper  name  field1  id  field1    gt          lt input type  text  name  name  class  fieldname  id  tb1 1    gt          lt input type  text  name  email  class  lastname  id  tb1 2    gt          lt input type  button  value     class  add  id  add    gt       lt  div gt   lt  fieldset gt    lt input type  submit  value  send  id  asdasd  name  submit    gt    Check my JSFiddle also    Whats wrong with me is when user click on     button first time then click function working and it adds two text-fields into my fieldset  But after that when i click on     button  its not triggering click function  May be id conflict  Please help

User · Answer

You need to use a delegated event handler, as the #add elements dynamically appended won't have the click event bound to them. Try this:

$("#buildyourform").on('click', "#add", function() {
    // your code...
});

Also, you can make your HTML strings easier to read by mixing line quotes:

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');

Or even supplying the attributes as an object:

var fieldWrapper = $('<div></div>', { 
    'class': 'fieldwrapper',
    'name': 'field' + intId,
    'id': 'field' + intId
});

User · Answer

You need to use the event delegation syntax of  on   here  Change       add   click function       to      buildyourform   on  click     add   function        jsFiddle example

User · Answer

The click event is not bound to your new element  use a jQuery on to handle the click

User · Answer

After making the id unique across the document  You have to use event delegation        container   on  click    buttonid   function        alert  Hi

[javascript] Jquery button click() function is not working

Examples related to javascript

Examples related to jquery

Examples related to html