jquery - Click event not working for dynamically created button

Question

My requirement is to create number of buttons equal to the json array count  I was successful in creating buttons dynamically in jquery  But the method in  ready function of jquery is not called for the click action  I have tried searching in SO  Found few solutions but nothing worked for me  I am very new to jquery  Please help     my code  jQuery     document  ready function         currentQuestionNo   0      var questionsArray        getJSON  http   localhost Sample JsonCreation php   function data                   questionsArray   data          variable   1                CREATE QUESTION BUTTONS DYNAMICALLY    NOT WORKING         for  var question in questionsArray                        var button       lt input gt    attr  type    button   attr  id    questionButton   val variable                   body   append button                              Tried using  next here - but it dint work                     body   append   lt button id  questionButton  gt     variable     lt  button gt                 variable                      displayQuestionJS questionsArray currentQuestionNo   document                      button   click function                  if    this  attr  id       nextQuestion                         currentQuestionNo     currentQuestionNo                    else if    this  attr  id       previousQuestion                         currentQuestionNo   --currentQuestionNo                     displayQuestionJS questionsArray currentQuestionNo   document               function displayQuestionJS currentQuestion  document         document getElementById  questionNumber   innerText    currentQuestion questionNumber      document getElementById  questionDescription   innerText    currentQuestion quesDesc         label for optionA    html currentQuestion optionA          label for optionB    html currentQuestion optionB          label for optionC    html currentQuestion optionC      HTML content  lt form method  post  name  formRadio  gt    lt label id  questionNumber  gt  lt  label gt    amp nbsp   lt label id  questionDescription  gt  lt  label gt     lt br   gt   lt input type  radio  id  optionA  gt   lt  input gt   lt label for  optionA  gt  lt  label gt   lt br   gt   lt input type  radio  id  optionB  gt   lt  input gt   lt label for  optionB  gt  lt  label gt   lt br   gt   lt input type  radio  id  optionC  gt   lt  input gt   lt label for  optionC  gt  lt  label gt   lt br   gt    lt button id  previousQuestion  gt Previous Question lt  button gt   lt button id  nextQuestion  gt Next Question lt  button gt    lt br   gt   lt br   gt    lt input type  submit  id  submitButton  name  submitTest  value  Submit  gt  lt  input gt   lt  form gt    EDIT -- Sample  on Method code - Separate file  WORKING - THANKS A LOT   lt script gt    document  ready function            button   click function                 var button     lt input type  button  id  button2  value  dynamic button  gt               body   append button                  document  on  click    button2   function         alert  Dynamic button action          lt  script gt   lt  head gt    lt body gt    lt button id  button  gt Static Button lt  button gt    lt  body gt

User · Answer

the simple and easy way to do that is use on event:

$('body').on('click','#element',function(){
    //somthing
});

but we can say this is not the best way to do this. I suggest a another way to do this is use clone() method instead of using dynamic html. Write some html in you file for example:

<div id='div1'></div>

Now in the script tag make a clone of this div then all the properties of this div would follow with new element too. For Example:

var dynamicDiv = jQuery('#div1').clone(true);

Now use the element dynamicDiv wherever you want to add it or change its properties as you like. Now all jQuery functions will work with this element

User · Answer

My guess is that the buttons you created are not yet on the page by the time you bind the button  Either bind each button in the   getJSON function  or use a dynamic binding method like      body   on  click    button   function                   Note you probably don t want to do this on the  body  tag  but instead wrap the buttons in another div or something and call on on it   jQuery On Method

User · Answer

You could also create the input button in this way   var button     lt input type  button  id  questionButton  value   variable   gt   lt br   gt       It might be the syntax of the Button creation that is off somehow

User · Answer

You create buttons dynamically because of that you need to call them with  live   method if you use jquery 1 7  but this method is deprecated  you can see the list of all deprecated method here  in newer version  if you want to use jquery 1 10 or above you need to call your buttons in this way     document  on  click    selector   function             Your Code       For Example  If your html is something like this   lt div id  btn-list  gt       lt div class  btn12  gt MyButton lt  div gt   lt  div gt    You can write your jquery like this    document  on  click     btn-list  btn12   function             Your Code

[jquery] jquery - Click event not working for dynamically created button

Examples related to jquery

Examples related to html